自己搭建个人博客HEXO记录

写在前言：本文分为两个部分：从零建立hexo博客和深入了解并修改中的第一个部分

1. 前置知识

   （自行搜索或者进行基本尝试）

   • 明白hexo是什么，局限性和优越性
   • 明白node.js是什么以及和npm的关系
   • 明白github是什么以及和gitee的关系
   • 明白terminal是什么
   • 明白markdown格式书写

2. 初步建立

   一、环境准备

   提前装好 Git，这里不多讲解了，可以百度安装下。

   安装 Nodejs

   下载 nodejs：https://nodejs.org/en/

   

   来进行安装。

   安装完以后会有两个组件：1.是 npm 包管理器；2.是 Nodejs 。

   如果是 mac，需打开终端切换到 root 用户（目的是root时候不需要多次输入密码，这步可自选）:

   sudo su

   输入密码，敲回车。

   

   输入clear清一下。

   查看 node 的版本：node -v

   查看 npm 包管理器的版本：npm -v

   Windows 电脑我是直接以管理员身份打开 cmd，mac端打开terminal输入:

   查看 node 的版本：node -v

   查看 npm 包管理器的版本：npm -v

   因为 Hexo 需要 Nodejs 支持的、生成的，所以这是前置步骤。

   二、安装 Hexo 博客框架

   需借助 npm 包管理器来安装。因为国内安装镜像源很慢，所以利用 npm 安装 cnpm。

   用淘宝链接进行安装：

   npm install -g cnpm --registry=https://registry.npm.taobao.org

   

   看下 cnpm 的版本：cnpm -v

   这个是mac的截图，Windows一样操作

   安装 Hexo 框架：

   cnpm install -g hexo-cli

   

   hexo -v来验证下。

   可以看到 Hexo 的博客框架是基于 node 的。

   

   三、使用 Hexo 搭建博客（本地启动）

   方式一：

   在开始之前，输入 pwd 看下所处路径。

   新建一个 blog 文件夹：mkdir (blog文件夹名字)， 举例： mkdir myBlog

   方式二：

   在自己方便查看的位置手工创建一个 blog 文件夹。

   所有博客的东西全部都在 blog 里面生成。所以大家如果出了什么错，直接文件夹整个删除就行了。注意：千万不能只删除 blog 文件夹里面的内容，却不删除 blog 文件夹，这样操作会出问题的。

   进入 blog 的目录中，位于这个目录下，就可以使用 Hexo 生成我们的博客。

   （未sudo su情况下）mac 下输入 sudo，表示用管理员的命令来执行，用 mac 电脑需要加上。

   初始化一个博客：sudo hexo init

   初始化一个博客：hexo init

   安装完成后

   看该目录下的所有子目录和文件：ls

   启动博客：hexo s

   输入localhost:4000问下，看看博客是不是已经成功，已经有了，就像这样：

   

   其中上图介绍来hexo博客的基本使用：

   hexo s就是hexo server ，写一篇博客，可以用hexo s这个命令启动预览，在本地修改文件可以及时渲染到页面上，非常方便。

   切换到 source，输入命令：cd source/_posts/

   用 vim 编辑器/自己使用合适的app建立markdown文章放在文件夹内：

   可以进行编辑，也可以不编辑直接发布。

   如果是vim：点击键盘的 i 进行编辑，shift 和 esc 同时按下(这里我记得是这样用的，如果不行可以百度下），然后输入:wq保存退出。

   这样博客文章就创建好了。

   输入 pwd，看到在 source 目录下，需要退 2 层回去：cd ../..

   这样就到了 blog 目录。

   接着输入以下命令：

   • 启动下（渲染成页面）：hexo s

   • 刷新下页面

   以上 Hexo 博客的搭建已经完成了。

   四、部署到远端（Gitee/Github）上公开使用

   目前我们的博客还是在本地的，接下来要把它部署到远端，这样别人就可以访问你的博客了。本文记录使用Github和Gitee来托管我们的博客。

---

1.托管方案

Github或者Gitee（码云）的Pages服务，它们都能够免费托管站点，没必要专门弄个服务器。其中Gitee访问会比较快点，毕竟是国内的。

创建仓库

Github

• 创建一个仓库，仓库设置为公开的才能免费使用Github Pages服务。
• 仓库名必须设置为：**<用户名>.github.io**
• 如下图：我的Github用户名为khalil-chen，那么就需要创建一个名为sakura-mac.github.io的公开仓库。

• 创建完成后，我们就可以通过<用户名>.github.io来访问我们的站点了。

  Gitee

• 创建一个仓库

• 仓库名如果设置成和个人空间地址一样，那么访问地址就是： <个人空间地址名>.gitee.io

• 个人空间地址可在个人资料中查看。我的个人空间地址是khalil-chen，那么我的博客地址就是：khalil-chen.gitee.io

2.开始部署

以gitee为例子

接下来，我们就可以把本地博客部署远端了。

• 安装部署插件

在博客根目录中执行以下命令来下载自动部署工具：

$ cnpm install hexo-deployer-git --save

• 修改部署配置

  • ssh配置

    • git用户信息配置（创建仓库完成后）

    在Git Bash（终端）命令行输入：
    git config –global user.name “你的用户名”+回车
    git config –global user.email “你的邮箱”+回车

    • 生成/添加SSH公钥

    码云提供了基于SSH协议的Git服务，在使用SSH协议访问仓库之前，需要先配置好账户/仓库的SSH公钥。
    1、本机生成SSH公钥
    1）本地打开 Git Bash（终端），输入命令：ssh-keygen
    2）在暂停时按回车键，三次回车后，即可生成了SSH公钥
    3）命令：cat /.ssh/id_rsa.pub（“cat”与“”之间有空格）查看SSH公钥
    2、Gitee （码云）添加SSH公钥：
    在gitee上找到个人设置->安全设置->SSH公钥，然后将刚才生成的公钥输入公钥框，点击确定即可。
    3、确认是否配置成功
    在命令行输入：ssh -T git@gitee.com+回车
    在询问yes/no是，输入yes。这是因为首次使用需要确认并添加主机到本机SSH可信列表。
    若返回 “Hi XXX! You’ve successfully authenticated, but Gitee.com does not provide shell access.”内容，则证明添加成功。

  • 在文件夹_config.yml站点配置文件中修改如下配置：

  deploy:
    type: git
    repo: git@gitee.com:<仓库名>/<路径>.git
    branch: master

  注意：部署分支要和我们远端仓库的部署分支对应，没设置的话Hexo会自动创建一个分支作为部署分支。

3.执行部署命令

• 在博客根目录中执行以下命令：

$ hexo clean && hexo g && hexo d

//hexo clean 意味着清理一下
//hexo g 意味着生成相应的html代码保存
//hexo d 意味着远程推送到托管仓库里（如果远程推送一定要hexo g，否则页面代码未改变即推送了个寂寞，无法再渲染更新页面）

• 对于Gitee Pages，由于不支持自动更新，每次执行命令部署后需要手动点击更新，等待更新完成后访问地址即可看到效果。

如果看不到效果的话，暂停服务，然后再重新启动。

• 对于GitHub Pages，它支持自动更新，无需额外操作，稍等片刻后访问即可。

访问页面的网站地址可看到主题成功换了！

以上整个过程已经完成了。

3. 美化改进

   • 添加后台评论系统
   • 添加live2D（电子宠物）
   • 添加网易云播放器
   • 添加点击烟花特效
   • 添加个人网盘
   • 添加友链
   • 添加个人影院（解析口）
   • 添加公共聊天室

4. 测试

Donate