Bootstrap

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

2022-03-10 作者: xcbeyond

作者：xcbeyond

博客： 公众号：

你有个人网站吗？

在自媒体时代，人人都在不断向互联网等不同媒介输出内容，如：博客、微博以及抖音等，并在特定领域，依靠于广大社交媒体/平台，如：CSDN、掘金、知乎、InfoQ 等等，发表着自己的心得、学习经历、日常生活等。随着内容的不断输出，总有一些时候，你会想寻找一块“互联网自留地”，“为所欲为”，或是想要进行一些完整而非碎片化的记录，或者想要避免无穷无尽的内容审查，又或者你只是不喜欢社交平台那杂乱的界面和不必要的互动，此时拥有一个个人网站总是一个更好的选择。

提起个人网站，你或许心中一震，钱呢？服务器呢

今天我就和大家分享一种不花钱、不要独立服务器，也能搞起个人网站的方法。

1、需求分析

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

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

  • 网站系统：自己从头写？搞个开源的自己改？花钱买吗？

  • 网站维护：不懂网站的搭建、维护等操作，毕竟对于一个正规网站其本身的维护就是一门学问。对于个人而言，即使能力允许，但精力肯定是不允许。

  • 服务器：搞个个人网站，还得每年承担服务器的费用，随着时间的推移，你可能就不太愿意再花钱买了。（10年前的我，曾这么搞过，最终以失败告终。）

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

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

2、站点规划

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

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

  • Hugo：由 Go 语言实现的静态网站生成器，简单、易用、高效、易扩展、快速部署。只需在本地编写 markdown 文件，即可完成日常文章的维护。

  • Github Pages：是一个静态站点托管服务，直接将个人、组织或项目的页面托管于 GitHub 仓库中。（关键是不花钱，用来将个人站点资源存放于此。）

3、开始建站

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

3.1 Hugo 搭建

3.1.1 安装 Hugo

参考：。

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

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

安装完成后，输入以下命令确认：

正常输出结果，则说明 Hugo 安装成功。

3.1.2 新建 Hugo 网站

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

在本地选择合适的目录，执行 hugo 站点创建命令 ，例如：

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

xcbeyond@xcbeyonddeMacBook-Pro github % hugo new site hugo-site-demo
   Congratulations! Your new Hugo site is created in /Users/xcbeyond/github/hugo-site-demo.

   Just a few more steps and you're ready to go:

   1. Download a theme into the same-named folder.
      Choose a theme from https://themes.gohugo.io/ or
      create your own with the "hugo new theme " command.
   2. Perhaps you want to add some content. You can add single files
      with "hugo new /.".
   3. Start the built-in live server via "hugo server".

   Visit https://gohugo.io/ for quickstart guide and full documentation.

进入站点目录 ，默认文件目录结构如下：

│-config.toml
   ├─archetypes
   ├─content
   ├─data
   ├─layouts
   ├─static
   └─themes

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

  • content : 文章存放目录。

  • themes : 网站主题存放目录。

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

作为以写作为主打的博主, 知道以上目录的含义, 现在就可以开始写作了.

3.1.3 选择 Hugo 主题

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

以  为例进行说明。

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

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 为例说明。

xcbeyond@xcbeyonddeMacBook-Pro hugo-site-demo % cp -r themes/hugo-universal-theme/exampleSite/ ./

在 Hugo 网站文件夹的根目录下，打开 config.toml 文件，修改主题的正确路径，需将配置  注释掉。

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

baseurl = "https://xcbeyond.github.io" # Configure URL. if using gh-pages https://github.com//hugo-universal-theme URL: https://.github.io/hugo-universal-theme/
   title = "Hugo 示例站点"
   theme = "hugo-universal-theme"
   # themesDir = "../.."
   languageCode = "en-us"

更多 config.toml 配置说明可参考  和 。

3.1.5 本地预览

执行命令 ：

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

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

3.1.6 创建文章

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

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

xcbeyond@xcbeyonddeMacBook-Pro hugo-site-demo % hugo new about.md 
   /Users/xcbeyond/github/hugo-site-demo/content/about.md created
   ```

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

   ```md
   ---
   title: "About"
   date: 2021-12-05T20:40:17+08:00
   draft: true
   ---

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

3.2 站点部署

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

Github 是绝对的最佳选择。

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

3.2.1 推送站点源码仓库

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

注： 为示例仓库，故设置为公开仓库，实践中建议设置为私有仓库。

可选择与本地 hugo-site-demo 不相同的目录，将 github 上新建的仓库克隆到本地。

3.2.2 创建 GitHub Pages

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

3.2.3 自动化部署

利用 实现将站点源文件（如：）自动化部署到 GitHub Pages （如： ）上。

创建 Github Actions 文件。

在站点源文件根目录，创建  文件：

# 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 # 如有独立域名，修改为自己的域名

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

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

4、总结

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

关于我们

Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.

热门标签

Elsewhere

  1. GitHub
  2. 竹心导航

返回顶部