博客搭建笔记

Hugo,静态站点生成器,依赖少,编译快。基本命令参考 Quick Start

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
# new 命令创建一个新的网站,会在当前目录生成站点文件夹
hugo new site my_website
cd my_website
# 初始化 git 库
git init
# 把主题仓库作为你的网站目录的子模块
git clone https://github.com/HEIGE-PCloud/DoIt.git themes/DoIt
# 新建文章页面,位于 content/posts 目录
hugo new posts/my-first-post.md
# 本地运行站点。-D 等于 --buildDrafts,包含草稿;--disableFastRender 完全重新渲染;-e 等于 --environment 运行环境,hugo server 默认是 development,而 production 会开启评论系统, CDN 等特性
hugo server -D --disableFastRender -e production

站点主题为 DoIt,界面简洁,功能丰富。使用指南参考主题文档,示例文件位于主题包的 exampleSite 文件夹。

Avataaars Generator,用户头像生成器,简单的卡通头像。

Favicon Generator,网站图标生成器,适配桌面端和移动端的网页图标。

Github Actions,持续集成,搭配 Github 存储库。代码推送到存储库后,自动完成构建站点。

 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
# This is a basic workflow to help you get started with Actions

name: Deploy Pages

# Controls when the action will run. 
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches:
      - main # Set a branch name to trigger deployment
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Allow one concurrent deployment
concurrency:
  group: ${{ github.ref }}
  cancel-in-progress: true

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  deploy:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      # Runs a single command using the runners shell
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.111.3'
          extended: true

      # Runs a set of commands using the runners shell
      - name: Build
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "https://example.pages.dev/"          
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.YOUR_DEPLOY_KEY }}
          external_repository: github-name/your-repository
          publish_branch: main
          publish_dir: ./public

注意 branches 参数和当前分支名是否一致,否则无法触发自动构建。

这里我将生成的静态页面推送到了另一个 Github 存储库,限制托管站点只能拉取页面文件存储库,不会影响到源文件存储库。

如果页面托管在多个站点,只需增加多个工作流文件,修改 --baseURLdeploy_keyexternal_repository 为相应的参数。

有关 Deloy key 参考 Create SSH Deploy Key

Cloudflare Pages,静态页面托管,自带 Cloudflare Analytics 站点分析。

Cloudflare 本身是 DNS(Domain Name System,域名系统)和 CDN(Content Delivery Network,內容分发网络)服务商,在大陆无法正常访问 Github Pages 的情况下,Cloudflare Pages 是个较好的选择。

评论系统为 Twikoo,免费使用、管理便捷。文档参考 快速上手

PageSpeed Insights,用户体验分析工具,测试优化页面性能。

PageSpeed Insights