想了很久（大概半小时）到底要以什么文章来作为开站系列，最终还是打算把我这几天建站的流程给记录下来。一来可以当成笔记翻翻，二来也可以是本站发展史了。这个系列估计能贯穿小站的整个生命周期，但更新不会太频繁，实在是十分适合懒人开坑了。

注：本期未涉及Hexo的配置，仅为初始网站样式，配置的话请看第二期~

建站成本

在本地建站的话是不需要成本的，但一般我们需要部署到线上，而线上需要考虑两个点：

  • 有个域名（购买，或者白嫖Github Pages）
  • 有个时刻在线的服务器/主机（购买，或者白嫖Github Pages）

所以为什么不白嫖呢
如果你能达到要求的话，恭喜，其他就没有必须要花钱的地方了。

此外，为了有良好的体验，我也比较推荐掌握以下技术：

  • markdown语法（发文章会用到，尽量掌握）
  • yml、json代码（不用会写，但最好能看懂结构，知道怎么改）
  • html、css代码（真正自定义网站的时候要用，大佬必备，我反正不会）

总而言之，我们可以继续往下了。

本地部署

首先把上面的所有东西都放一边，我们先利用Hexo建立一个初步的本地网站。Hexo官方文档已经写的比较清楚了，我随便写点凑凑字数哈。

如果使用自购服务器和域名，请直接在服务器上进行这部分操作。（除非你想在自己的电脑上试试水）

安装基本的两个东西（命令行）：

接下来进行Hexo的安装：

1
2
# npm是Node.js带的包管理器
$ npm install -g hexo-cli

完事！

最后就是在本地开个新文件夹给他（存储网站源文件），一定记得要cd 进去：

1
2
3
4
5
6
# 创建并进入文件夹
$ mkdir my_hexo_folder
$ cd my_hexo_folder
# 初始化（它会下载一堆配置文件进来）
$ hexo init
$ npm install

文件夹里面大概长这样，各种文件我们晚点再说~

1
2
3
4
5
6
7
8
my_hexo_folder
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes

然后来看看一个初始的站点长什么样吧（激动.jpg），记住下面这套组合拳，我们以后每次更新文章都得用到

1
2
3
4
# pwd: my_hexo_folder
$ hexo cl   # clean     清空现有网站文件
$ hexo g    # generate  生成新网站文件
$ hexo s    # setup     本地部署到127.0.0.1:4000

浏览器打开http://127.0.0.1:4000，大功告成~

线上部署

下一步将阵地从本地转移到线上（不然还怎么叫网站呢）

方案一：Github Pages

  1. 注册一个Github账号（废话）；
  2. 新建一个仓库（想白嫖的话就用public的，氪金随意），取名为{yourname}.github.io（这里的{yourname}必须是你的Github账号名）：
  3. 回到本地，打开my_hexo_folder/_config.yml找到下面两段配置，补上： 
    1
    2
    3
    4
    5
    6
    7
    8
    # set website url
    url: https://{yourname}.github.io
    ...
    # set Github url
    deploy:
        type: git
        repo: https://github.com/{yourname}/{yourname}.github.io
        branch: master
  4. 运行Hexo生成并部署，现在能自动推上Github了（可能需要输入账号密码，这个与Git的配置有关，可以设置为记住，那就不用每次都输入了）； 
    1
    2
    # pwd: my_hexo_folder
    $ hexo cl && hexo g && hexo d
  5. 坐下来，喝口水，然后打开https://{yourname}.github.io，搞定~

注：如果使用Private仓库，则需要充值成为Github会员才能仓库文件推到域名上，否则打开一直是404；不开源不准白嫖？

方案二：自购服务器和域名

如果是自购服务器和域名的话，则需要找对应平台的教程，大致分为如下几个步骤：

  1. 在服务器内建立本地站点（见上一部分），并启动本地部署；
  2. 将网站对应的端口开放到公网（或者映射啥的，只要能从外面连进来就行）；
  3. 将域名连接到你的服务器及端口上（这个域名提供商会有教程的）。

不过我没弄这玩意，就不详细讲了。

备份源码

需要注意的是，被推上Github和网站的文件仅有本地my_hexo_folder/public里面的内容。换句话说，你不能将Github上那些玩意扒下来再重复做一次Hexo生成。已经六亲不认了

所以源码的备份十分必要，否则源代码一旦丢失那就完了。

本地备份/网盘备份

复制到另一台电脑、复制到另一个硬盘、复制到网盘上，这没啥好说的吧。

Github备份

我个人来说的话，还是倾向于把代码文件放到存代码的地方…所以选择了这个。
当然，源代码是不可能开源的，所以为了白嫖Github Page我又新建了一个私有仓库，每次用Hexo部署完网站后再用Git推上私有仓库。

假如你不在意源代码开源，或者是已经用上了私有Github Page的话，这里有个更简单的办法：

  1. 在你的仓库里新建分支，比如取名为source；
  2. 将本地my_hexo_folder链接到这条分支；
  3. 创建一个工作流my_hexo_folder/.github/workflows/deploy.yml 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    name: deploy    # 名字当然随便取

    on:
    push:
        branches:
        - source    # 对应源代码分支，假如有push就执行这条工作流

    jobs:
    pages:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v2
        - name: Use Node.js 16.x
            uses: actions/setup-node@v1
            with:
            node-version: '16.x'    # 这里选择与本地一致的版本比较方便
        - name: Cache NPM dependencies
            uses: actions/cache@v2
            with:
            path: node_modules
            key: ${{ runner.OS }}-npm-cache
            restore-keys: |
                ${{ runner.OS }}-npm-cache
        - name: Install Dependencies
            run: npm install
        - name: Build
            run: npm run build
        - name: Deploy
            uses: peaceiris/actions-gh-pages@v3
            with:
            github_token: ${{ secrets.GITHUB_TOKEN }}
            publish_dir: ./public
            publish_branch: master  # 网站分支，默认都是master
  4. 万事大吉，以后只需要git push上去source分支，Github就会自动帮咱生成到master分支，然后网页就更新了。

对于自购域名的情况或许也能也利用workflows，咱还不会，咱就不谈了。

网站更新

简而言之，以后网站的更新大致走这么个流程就好：

  1. 同步源代码
  2. 进行你想做的更新
  3. 无论如何，先在本地部署并观察一遍 
    1
    2
    # pwd: my_hexo_folder
    $ hexo cl && hexo g && hexo s
  4. 如果使用Github工作流，则直接推上去，完事；否则手动部署 
    1
    2
    # pwd: my_hexo_folder
    $ hexo d
  5. 同步源代码

写在后面：总算写完第一篇了，写文章真累md