[Day31] Hexo x GitHub Pages 打造个人部落格

铁人赛３０天结束後，紧接着开始六角学院的课程，又有新的笔记要写，导致这系列的 Vue 一直没有办法写下去，也因为写的主题变多，决定来架设部落格，之後的文章也都会放到部落格内，这篇也分享学习架设的过程。

为何选择 Hexo + GitHub Pages

优点：

1. 免费
2. 现成样板自行套用，适合不需要高度客制化的人
3. 本地撰写，一个指令快速部署上线
4. 支援 Markdown

缺点：

1. 只能放静态网页
2. 没有後台可以做线上编辑（部分主题有提供连结GitHub文章编辑的功能）
3. Hexo 和 主题 的版本都会更新，寻找网路资源时需要自行过滤（可能过1~2年的文章就不一定适用了）

架设流程

1. 事前准备

• 拥有 GitHub 帐号
• 完成 Node.js 环境建置（会用到 npm）
• 安装 IDE（推荐 VS Code）
  以上如不会操作，可以参考本系列前面的文章

2. 建立 GitHub Pages

1. 开新的 repository
   
2. 名称设定为『自己的帐号.github.io』，并设为公开
   
3. 进入这个 repository，并点击 settings
   
4. 左侧选单选择『Pages』，并点击『Choose a theme』，随便选一个主题即可。
   
5. 在浏览器网址列输入https://自己的帐号.github.io 就可以看到基本的 GitHub Pages 画面。

3. 安装 Hexo

1. 开一个新的资料夹，并且用 VS Code 开启。

2. 在终端机使用 npm 安装 Hexo。

   $ npm install -g hexo-cli
   

3. 初始化基本的 Blog 环境。

   // "blog"此处为自定名称，可以自行修改
   $ hexo init blog
   

4. 完成後会生成一个资料夹存放相关档案，资料夹名称会是刚刚指令里面指定的名称。
   

5. 移动到刚刚建置的资料夹内。

   // 依照自己定义的资料夹名称更改指令
   $ cd blog
   

6. 使用 npm 安装所需相关套件。

   $ npm install
   

7. 安装 git 部署用套件。

   $ npm install hexo-deployer-git --save
   

8. 要安装的项目到此已经完成。

4. 设定 Hexo 环境

1. 编辑 _config.yml 的基本资讯。

   • title: 标题
   • subtitle: 副标题
   • description: 描述
   • keywords: 关键字
   • author: 你的名字
   • language: zh-TW，语系预设为 en
   • timezone: 时区，可不填，预设使用电脑时区

   可以参考官方文件，有详细解说：
   https://hexo.io/zh-tw/docs/configuration.html

2. 编辑 _config.yml 的部署设定（在文件底部）。

   • type: git
   • repo: https://github.com/自己的帐号名称/自己的帐号名称.github.io.git
   • branch: main (预设是 main，请确认有无更动 repository 预设 branch 名称)

5. Hexo 基本操作

1. 前面步骤在安装好 Hexo 的时候，已经有一个样板页面，因为设定有调整，所以需要让他重新生成页面。

2. 先确认终端机目前处在 Hexo 建立的资料夹位置，使用指令清除先前的页面

   $ hexo cl
   或是
   $ hexo clean
   

3. 建立页面

   $ hexo g
   或是
   $ hexo generate
   

4. 部署到 github

   $ hexo d
   或是
   $ hexo deploy
   

5. 前往 GitHub Page（https://自己的帐号.github.io）查看页面是否变得不一样了。
   

6. 除了使用 hexo 指令操作，可以打开部落格资料夹中的 package.json，里面会有 Hexo 建立的scripts指令，可以用 npm 指令来操作，如果觉得每次都要下 3 个指令来检查编辑成果，也可以自己新增指令让他一次跑完：

   "scripts": {
   
     // 以下为自己设定的
     "go": "hexo clean && hexo generate && hexo server",
   
     // 以下为 Hexo 建立的
     "build": "hexo generate",
     "clean": "hexo clean",
     "deploy": "hexo deploy",
     "server": "hexo server"
   
   },
   

   完成上面的设定後，只要输入指令 npm run go 就会执行清除、重建和开启本地服务器３个动作，指令名称和执行的动作都可以自由更改。

6. 常用指令

• hexo server（hexo s）：如果希望在上传到 GitHub 前能先查看编辑的成果，可以用这个指令，预设会在本地端的 4000port 开启（网址是：http://localhost:4000/），只要在终端机中按下 Ctrl + C 就能关闭服务器。
• hexo new "文章名称"：新增一篇文章，新增完成後可以到 source/_posts 这个路径底下找到文章并且编辑。

参考文章
玛利欧的部落格
石头的coding之路