建站小记

2023年2月15日

准备重开个人博客，希望跟世界建立更多的连接。网络上的帖子看了很多也折腾了许久，但是弱水三千只取一瓢，最后自己摸索出来的建站方案是各个帖子东拼西凑下来的。记录下来供有缘人参考。

建站和写作

创建一个私人的Github 仓库（例如叫Hugo_Site），我采用的是Hugo。直接按照官方的指南安装即可。我使用的主题是Diary。将主题下载下来，放到themes目录中。

对于图文博客，初期没有考虑图床。为了更方便管理，我参考的是Hugo如何在markdown里引用本地图片。我使用的是Typora写作，在Typora中将存储图片到相同目录这个选项打开即可。在写作的时候，在/Content/Posts目录下新建一个文件夹，在其内新建一个index.md，在这个md文件中写作。图片会存储在这个文件夹内，在生成站点的时候也会自动被Hugo拷贝到正确的目录，不用我们管。

写完文章以后在我们的仓库根目录下hugo server -d就可以预览网站，直接hugo生成网站。

最后我们的目录树如下：

├── .git //这是我们的私人仓库
├── .github //这是我们使用github action的地方，用于部署
│   └── workflows
├── .gitignore //[1]
├── .gitmodules
├── assets
├── config.toml
├── content
│   └── posts //文章贴这里
├── data
├── public //[2]
│   ├── .git
├── resources
│   └── _gen
├── static //[3]
└── themes
    └── diary

注释：

.gitignore参考https://github.com/github/gitignore/blob/main/community/Golang/Hugo.gitignore
这个目录就是我们的网站目录。首先需要在Github上新建一个公开仓库，命名为username.github.io。然后在这个public目录下新建一个本地git仓库，git remote add origin设置为username.github.io这个远程仓库。

在生成网站以后，将username.github.io这个仓库Push到Github，稍等片刻访问username.github.io就能看到我们的个人博客上线啦。

如果需要自定义域名，从域名提供商那里购买域名，然后设置解析到username.github.io即可。我的域名(www.wxgopher.cc)是在Cloudflare购买的。在Cloudflare的设置界面中设置CNAME代理www到wxgopher.github.io。同时在wxgopher.github.io的repo中找到Settings->Pages->Custom Domain，设置www.wxgopher.cc。

20230219更新：将网站同时部署到了cloudflare pages，提高国内的访问速度。域名设置重定向到cloudflare pages。如何设置只需要按照cloudflare手册操作即可。

部署和SEO

我们每次写完博客以后必须本地hugo生成一下，然后手动Push /Public中的内容到Github，这很繁琐。我们可以设置Github Action，在每次Push Hugo_Site的时候自动触发网站构建并推送到Github Pages。

首先在Github账户中找到Setting - Developer setting - Personal access tokens。新建一个token，开启Repo和workflow权限，然后记录下这个Token。注意，这个Token只会展示一次。

在Hugo_Site/.github/workflows中新建deploy.yml，内容如下：

name: deploy

on:
    push:
    workflow_dispatch:
    schedule:
        # Runs everyday at 8:00 AM
        - cron: "0 0 * * *"

jobs:
    build:
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v2
              with:
                  submodules: true
                  fetch-depth: 0

            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                  hugo-version: "latest"
                  extended: true

            - name: Build Web
              run: hugo

            - name: Deploy Web
              uses: peaceiris/actions-gh-pages@v3
              with:
                  PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
                  EXTERNAL_REPOSITORY: wxgopher/wxgopher.github.io
                  PUBLISH_BRANCH: master
                  PUBLISH_DIR: ./public
                  CNAME: www.wxgopher.cc

这里CNAME，EXTERNAL_REPOSITORY换成自己的。然后在仓库的Settings->Secrets中新建一个名称叫PERSONAL_TOKEN的Secret，值为刚才的Token值。直接Push到Hugo_Site这个仓库便会触发自动构建网站，构建网站的产物自动推送到wxgopher.github.io这个仓库中。

设置SEO，让搜索引擎能抓到自己的网站：

百度：在https://ziyuan.baidu.com/中验证自己的网站，然后手动提交网站Sitemap；

Bing：在Bing Webmaster中提交自己的网站；

Google：在Google Search Central中提交自己的网站。