个人博客搭建

个人博客搭建教程

一、前言

心血来潮，想搭建一个blog充当个人网站用来记录一下平时学习过程中的笔记，分享一些学习的经验。这篇Blog就是记录分享一下我在学习博客搭建的笔记。
说干就干，在B站找了各种教程，绝大多数up主推荐的就是使用Hexo与Github的组合。该组合完全免费，操作较为简单，bolg更新速度快等优点，关于这种方法的视频非常多，于是就选择这种方法。当然除了hexo+github的组合外，现在Rstudio还出了一个Quarto，Quarto也是可以直接搭建个人博客的，最近比较流行。

Hexo+github的视频教程在B站上很多，我个人是根据以下三个视频结合使用的：①. Codesheep；②. 小书童；③. zxfans。
简单说一下3个视频的区别：

• 前面2个视频都是在Mac系统下操作的，最后一个是在Window系统的教程，根据不同的系统选择不同的视频教程即可。
• 第二个视频其实使用的hexo与VPS的组合。VPS具体是什么，我不太了解。我个人认为VPS就是与Github一样，是一个服务器

二、操作步骤

整个搭建流程分为以下7个步骤：

1. 下载安装hexo
2. 创建Blog文件夹
3. 初始化博客、启动博客(本地博客)
4. Github创建仓库
5. 在本地部署Git全局
6. 将博客部署到Github仓库
7. 修改主题

1. 下载安装hexo

• 安装node.js，Hexo是基于node的，所以首先下载node.js。直接在官网下载node.js然后安装。

• 安装完成后使用node -v命令来检查是否安装成功。

• 使用npm下载安装hexo，npm install -g hexo-cli #安装hexo框架，如果下载不下来可以安装cnpm。

  • npm install -g cnpm --registry=http://registry.npm.taobao.org安装完成后使用 cnpm -v #查看cnpm版本 检查cnpm是否成功安装。
  • 最后使用cnpm安装hexo框架 cnpm install -g hexo-cli #安装hexo框架

• 安装完成后使用 hexo -c #查看hexo版本 检查hexo是否成功安装。

2. 创建Blog文件夹

• 自定义一个位置创建一个用于存在hexo构建blog的文件夹mkdir blog。
• 进入创建好的blog文件夹中，进行hexo初始化步骤。

3. 初始化博客、启动博客(本地博客)

• hexo init #初始化博客，当初始化完成后blog文件夹中会生成以下文件：

• 可是使用hexo -s命令生成一个本地博客，如下：

• 在浏览器中打开http://localhost:4000/，就可以看见默认的一个Hello world的初始博客。

• 至此，hexo可以成功的安装并生成本地博客。

4. Github创建仓库

• 注册Github账号。

• 成功注册Github账号后，创建一个仓库用于存储heox创建的博客内容。

• 创建仓库，仓库名字的格式一定要写对：YourGithubName**.github.io**。后面的github.io是统一的，前面填写注册时所使用的用户名。

5. 本地部署Git全局

• 第3个视频教程说了如何在本地构建Git全局。
• 图文教程SSHkey
• 首先使用git config --global user.name " "注册github时所使用的用户名。
• 再输入git config --global user.email"" 注册github时所使用的邮箱。
• 以上两步完成后，生成sshkey，ssh-keygen -t rsa -C "注册github的邮箱 "。
• 完成上一步后使用cat ~/.ssh/id_rsa.pub获得sshkey。
• 而后在github seeting中输入刚才获得的sshkey。

6. 将博客部署到Github

• 首先安装一个部署插件cnpm install --save hexo-deployer-git #在blog目录下安装git部署插件。

• 安装完成后，需要配置一下_config.yml文件

  deploy:
  	type: git 
  	repo: https://github.com/YourGithubName/YourGithubName.github.io.git
  	branch: master

• 配置完成后输入hexo g -d，将博客部署到Github。

• 该网址可查看生成的blog https://YourGithubName.github.io/

7. 修改博客主题

• 在hexo.io网址下选择个人钟意的主题。
• 下面以Chic主题为样例：
  • 首先通过git 在主题制作者的github中clone主题文件。
  • cd到blog文件夹下的theme文件夹中，然后输入git clone https://github.com/Siricee/hexo-theme-Chic.git Chic
  • 下载完成后在theme文件夹中会出现Chic主题。
  • 最后还是在_config.yml文件中进行配置：

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: Chic

  • 最后hexo g -d重新配置。

三、Issues

下面将我在搭建过程中遇见的问题还有写这篇博客过程中遇见的一些问题做一个汇总：

• 在整个搭建过程中，最容易出错的地方在于第6步将博客部署到github远端。出错的原因主要是之前没有在电脑本地进行github的全局部署。
• Github全局部署可以参考文章中的那篇图文教程，总体而言还是很简单的，具体的视频教程可以自行在B站搜索一番。
• 个人非常注重实用体验，尤其是电脑软件的使用体验，特别是笔记软件🤣，在使用Markdown语法在写这篇博客的时候我来回换了3种软件：①. Mweb Pro，②. Typora，③. VScode。总体而言流畅度最高的还是VScode👍🏻，非常流程丝滑，非常棒。但是在插入图片的时候就麻烦了很多，很不方便。插入图片最好的还是Mweb Pro，但是流程度很糟糕，不知道是什么原因前段时间使用的感觉还是非常好的。这两款软件都是传统的双栏，将源格式与预览页面分隔开。在之前我是很不喜欢这种双栏的呈现方式，钟意Typora那种所见即所得的方式，但是当我这次较为深度的使用之后，我改变了我的想法，双栏这种经典的还是好。Typora那种将格式符号隐藏，所见即所得的方式在输入行代码时不太方便，没有格式符号总是容易操作失误。
• 使用MD书写博客，图片插入还是一个问题，使用图床的方式还没来得及仔细研究，需要在琢磨琢磨。
• 使用hexo构建的博客在使用做好的主题时，需要个性化修改，这个在下次再写一篇关于这方面内容的记录。