利用 Github Pages 和 Hugo 快速搭建免费的个人网站

2021-12-27 16:20:23 浏览数 (1)

1、需求分析

个人网站，主要是用来记录属于个人的东西，将内容以最直接方式呈现给大家，其中文字、图片占比最多，基本不存在其它用户的注册场景。

对于个人网站，大家主要有以下方面的思考：

  • 网站系统：自己从头写？搞个开源的自己改？花钱买吗？
  • 网站维护：不懂网站的搭建、维护等操作，毕竟对于一个正规网站其本身的维护就是一门学问。对于个人而言，即使能力允许，但精力肯定是不允许。
  • 服务器：搞个个人网站，还得每年承担服务器的费用，随着时间的推移，你可能就不太愿意再花钱买了。（10年前的我，曾这么搞过，最终以失败告终。）

因此，有没有对技术要求不高、不花钱、也能长久维护下来的个人建站方法呢？

答案是肯定的，接下来我就沿着这个思路一探究竟，让你轻松创建属于个人的免费站点。

2、站点规划

面对上述的需求，很早以前就有人这么干了，将静态站点作为一种最佳的选择，使你无需掌握过多的前端技术就能轻松搞定。

通过参考众多优秀的个人站点，我最终选择以 Github Pages Hugo 的方式来搭建属于自己的个人网站。

  • Hugo：由 Go 语言实现的静态网站生成器，简单、易用、高效、易扩展、快速部署。只需在本地编写 markdown 文件，即可完成日常文章的维护。
  • Github Pages：是一个静态站点托管服务，直接将个人、组织或项目的页面托管于 GitHub 仓库中。（关键是不花钱，用来将个人站点资源存放于此。）

3、开始建站

接下来，看看如何一步一步地为自己搭建一个个人网站吧！

3.1 Hugo 搭建

3.1.1 安装 Hugo

参考 Hugo 官方的安装指南。

根据你的操作系统，选择对应的安装方式。例如，我是 macOS, 则直接用 brew 命令快速安装：

如果你是 Windows 或者其他操作系统，则可选择二进制文件安装，到 Hugo Releases 下载对应的 Hugo 二进制文件，直接安装即可。

Hugo 确认。

代码语言：javascript复制
hugo version
3.1.2 新建 Hugo 网站

本步骤是在本地创建个人站点工程（即：hugo 网站源文件）。

新建 Hugo 站点。

(“hugo-site-demo” 为本示例而创建的 demo，并非 https://xcbeyond.cn 实际站点。)

Hugo 站点目录查看。

代码语言：javascript复制
│-config.toml
├─archetypes
├─content
├─data
├─layouts
├─static
└─themes

config.toml : 网站的配置文件，可配置网站名称、关键字、插件等。

content : 文章存放目录。

themes : 网站主题存放目录。

static : 静态资源存放目录, 如：图片、样式文件、脚本文件等。

3.1.3 选择 Hugo 主题

为了让你的站点更好看，可根据个人喜欢选择你喜欢的主题。

  1. 可以在 Hugo Themes 中选择自己喜欢的主题。

2. 将选择的主题下载到本地 hugo 站点主题目录下。

以 Universal 为例进行说明。

切换到本地 hugo 站点的主题目录 themes，下载主题。

代码语言：javascript复制
xcbeyond@xcbeyonddeMacBook-Pro hugo-site-demo % cd themes 
xcbeyond@xcbeyonddeMacBook-Pro themes % git clone https://github.com/devcows/hugo-universal-theme.git
Cloning into 'hugo-universal-theme'...
remote: Enumerating objects: 2386, done.
remote: Counting objects: 100% (1108/1108), done.
remote: Compressing objects: 100% (474/474), done.
remote: Total 2386 (delta 516), reused 930 (delta 393), pack-reused 1278
Receiving objects: 100% (2386/2386), 10.76 MiB | 3.52 MiB/s, done.
Resolving deltas: 100% (1270/1270), done.
3.1.4 配置站点

根据主题中的说明进行配置，一般主题中都有站点示例。

（不同主题配置略有差异，具体以主题中说明为准。）

下面以主题 Universal 为例说明。

将主题 hugo-universal-theme 中示例站点 exampleSite 文件夹的内容，全部复制到你的站点根目录。

修改站点配置文件 config.toml

修改站点的 baseurl，可修改为你的 Github Pages 地址，如：https://xcbeyond.github.io。

更多 config.toml 配置说明可参考 Configure Hugo 和 主题Universal配置。

3.1.5 本地预览

启动 Hugo server。

代码语言：javascript复制
xcbeyond@xcbeyonddeMacBook-Pro hugo-site-demo % hugo serve
Start building sites … 
hugo v0.85.0 extended darwin/arm64 BuildDate=unknown

                  | EN   
------------------- ------
Pages            |  43  
Paginator pages  |   0  
Non-page files   |   0  
Static files     | 105  
Processed images |   0  
Aliases          |  17  
Sitemaps         |   1  
Cleaned          |   0  

Built in 40 ms
Watching for changes in /Users/xcbeyond/github/hugo-site-demo/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/xcbeyond/github/hugo-site-demo/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl C to stop

在浏览器中打开 http://localhost:1313 预览。

恭喜你，个人站点本地搭建成功！

3.1.6 创建文章

日常站点文件，都是采用 markdown 文件进行维护。例如，创建一篇新文件。

切换到站点 hugo-site-demo 目录下。

执行命令 hugo new <xxx.md>，创建一个 about 页面。

about.md 自动生成到了 content/about.md ，打开 about.md:

这是 markdown 格式， --- 之间的内容用于设置文章的属性内容，--- 下面就是正文部分。

3.2 站点部署

本地已经搭建好啦，接下来如何对外发布呢？

Github 是绝对的最佳选择。

为了确保个人站点文章（markdown 文件）的相对安全，采取将站点源码仓库和站点分开，即：站点源码仓库设置为私有，站点 GitHub Pages 仓库设为公开。

3.2.1 推送站点源码仓库

将本地站点 hugo-site-demo 推送到自己的 github 上。

  1. 注册一个 GitHub 账号。如果你已有账号，直接登录。如果没有账号，注册并登录。
  2. 新建 仓库，如：hugo-site-demo。 注：hugo-site-demo 为示例仓库，故设置为公开仓库，实践中建议设置为私有仓库。
  3. 从 github 将 hugo-site-demo 下载到本地。 可选择与本地 hugo-site-demo 不相同的目录，将 github 上新建的仓库克隆到本地。
代码语言：javascript复制
git clone https://github.com/xcbeyond/hugo-site-demo.git

4. 将本地站点源码复制到本地github库，并提交、推送到 github。

3.2.2 创建 GitHub Pages

利用 GitHub Pages 来作为个人对外站点。

  1. 打开 GitHub Pages 官网，浏览并了解 User or organization site 部分对应的操作步骤。 GitHub Pages: https://pages.github.com
  2. 新建一个 GitHub repository，库名为 <username>.github.io，其中 username 是你的 GitHub 账号。例如：xcbeyond.github.io。
3.2.3 自动化部署

利用 Github Actions实现将站点源文件（如：hugo-site-demo）自动化部署到 GitHub Pages （如：xcbeyond.github.io ）上。

创建 Github Actions 文件。

在站点源文件根目录，创建 .github/workflows/deploy.yml 文件：

代码语言：javascript复制
# This is a basic workflow to help you get started with Actions

name: hugo-deploy-CI

# Controls when the action will run. 
on: push

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # docs：https://github.com/peaceiris/actions-gh-pages
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - name: Git checkout
        uses: actions/checkout@v2

      - name: Setup hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.81.0'
          extended: true

      - name: Build
        run: hugo
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.PERSONAL_TOKEN }}
          external_repository: xcbeyond/xcbeyond.github.io # 修改为自己的地址
          publish_dir: ./public
        #   keep_files: true
          publish_branch: master
          cname: xcbeyond.cn # 如有独立域名，修改为自己的域名

其中，on: push 表示提交时触发 Action，自动编译并部署到 GitHub Pages。

以后每次提交个人站点内容时，会自动编译并部署。

4、总结

个人网站的创建、部署、上线已经完成，为确保站点持续运转，需要你的精心维护、优化。站点功能的完善、好看，还需持续优化，可通过添加 Hugo 插件、修改主题样式等一系列方法完成。

github git 开源 markdown 网站

0 人点赞