使用 Hugo 从 0 到 1 搭建个人博客 |
您所在的位置：网站首页 › 个人博客分享怎么写文章 › 使用 Hugo 从 0 到 1 搭建个人博客 |
使用 Hugo 从 0 到 1 搭建个人博客
|
我喜欢一个关于知识分子的定义：他们是研究理念的，他们永远要站在一个制度的对立面。 这也是为什么我在信息爆炸的今天，依然推荐用 RSS 订阅的方式阅读新的信息，使用 Kindle 或者直接读纸质书，在独立博客发表文章，谨慎地使用抖音一类短视频服务。它们部分或全部地站在了当代社会的对立面。但在我看来，这却是回归到互联网本身的必经之路。 再一次细数我十年来的独立博客历程已无必要，无非是单调的一个时间列表。过程中，倒总是包含一个关键词「折腾」。如同麦克卢汉所说的「媒介即信息」，我选择独立博客作为我的信息传播渠道，也就必须融入这一传播介质之中。所以，这也是一篇关于「折腾」的文章。 在查阅多方资料，以及木木哥和其他朋友的帮助下，我 2020 年使用 Hugo 重新搭建了自己的博客网站。最近，我想如法炮制，用最快的速度给一个新入手的域名搭建网站，却发现「建站」这件事是一件典型的超低频操作，一次建站，除了爱折腾的人，对于大部分像我一样，只是寻找一个能舒舒服服写东西的地方的人来说，几年都不会有大的变动，所以当初对着电脑从 0 开始搭建出博客的过程，已忘到九霄云外。 对此，就启发我要写下这样一篇文章，解决以下问题： 面对像我一样纯粹的技术小白能够傻瓜式的如法炮制搭建过程快速、简单、容易上手。本文也因此分为上、下两个章节，基础篇和进阶篇。今天先讲基础篇，使用 Github 搭建免费的 Hugo 个人网站。 第一部分，基础版：使用 Github 搭建 Hugo 网站。 1. 注册 Github，创建 repo 仓库Github 是全世界程序员的福音书，一个技术人不可能不知道的开源技术社区。我们就从这里开始，让它成为我们自己网站的第一个落脚点。 注册 Github，就像注册任何网站一样。进入 Github 网站，点击Sing Up，输入自己的用户名、邮箱和密码，完成账户验证，点击Create account，之后可以选择你的职业，你想用 Github 做什么，或者干脆跳过，直接下一步。  查收你的邮箱，点击确认链接，完成注册。 点击右上角+ - New repository，填写 Repository name，点击Create repository。  到此，Github 上的工作就已经完成了。你会得到如下图一些完全看不懂的东西。没关系，我们输入一个 Repository name ，点击 Create repository ，开始下一步。  2. 安装 VS Code 和 Git，开启折腾之旅我们在本地的电脑上，还需要安装两个软件，一个是 Git，一个是 VS Code，Git 是一个版本控制系统，是我们连接 Github 的钥匙，而 VS Code 本身是微软出品的一款程序员使用的开发集成工具。我们不需要懂得这么多，只把它看成是我们的博客管理平台就可以了。 2.1 安装 Git去 Git 官网下载，按照默认配置一直下一步，安装。 安装完毕，打开桌面的快捷方式，我们需要现在本地创建一个 ssh key，这个目的就是在你的电脑上生成一个密钥，获取之后，在 Github 上输入，就把你的电脑和 Github 连接起来，以后我们就可以在快速、方便地保存自己的本地文件到 Github 上，并生成网站内容。 //输入下面的代码，获取密钥（双引号内容为你自己注册账号时的邮箱）： $ ssh-keygen -t rsa -C "[email protected]" 在默认目录中找到 .ssh 中的 id_rsa.pub 文件，打开，复制。  回到浏览器中，进入 Github 设置 中的 SSH and GPG keys，新建一个 SSH keys，标题自己起，Key 的内容就输入刚才复制的文件中的值，然后添加。  回到本地的 Git 窗口，输入如下代码，验证是否链接成功。 $ ssh -T [email protected]
 成功之后，输入下面的代码，绑定自己的 Github 账号，到此，连接本地和 Github 的工作就完成了。 $ git config --global user.name "XXXX" $ git config --global user.email "[email protected]" 2.2 安装 VS Code点击进入 VS Code 官网，选择自己的版本下载，我这里是 Mac 版本。如果安装不熟悉，就一路默认配置。安装完成，打开 VS Code 软件。点击Extensions，安装所需插件。在这里也推荐几个必备和好用的插件。 gpm 用来管理 Github 上的文件。 必备Setting Sync 同步 Github 与本地文件。 必备Markdown All in One 使用 Markdown 写作的利器。必备Chinese Language Pack for Visual Studio Code VS Code 的汉化插件。 推荐Auto Rename Tag 如果涉及修改代码的时候，非常好用。推荐Material Icon Theme 一套个性的图标主题。 推荐 进入 Github 选择刚才建立的 Repo，复制 HTTPS 链接，在 VS Code 中切换左侧边栏到 Project Management（项目管理）中，点击+，粘贴地址，回车。  之后就可以在 gpm 中找到相应的 Github 项目。右键点击你的项目名，选择在文件管理器中打开。  2.3 安装博客点击下载（提取码: g5xe）我准备好的 Blog 网站文件。将下载好的文件解压后，Copy 到项目文件夹。找不到本地文件夹，可以在文件管理器中右键自己的博客项目，选择打开目录。  解压后的文件内容目录如下： ├── archetypes │ └── default.md ├── config.toml # Hugo 配置文件 ├── content │ └── posts # 文章目录 │ ├── hello-world.md │ ├── hugo-single-link.md │ └── huo-zha-le.md ├── static # 静态文件目录 │ ├── images │ └── photos │ └── 刘堃现场.jpeg └── themes # 主题目录 └── hyde ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── archetypes │ └── default.md ├── go.mod ├── images │ ├── screenshot.png │ └── tn.png ├── layouts │ ├── 404.html │ ├── _default │ │ ├── baseof.html │ │ ├── list.html │ │ ├── path.html │ │ ├── single.html │ │ └── terms.html │ ├── index.html │ ├── partials │ │ ├── comments.html │ │ ├── head.html │ │ ├── head_fonts.html │ │ ├── hook_head_end.html │ │ └── sidebar.html │ └── shortcodes │ ├── link.html │ └── music.html ├── static │ ├── Bmdb.min.css │ ├── Bmdb.min.js │ ├── apple-touch-icon-144-precomposed.png │ ├── css │ │ ├── hyde.css │ │ ├── poole.css │ │ ├── print.css │ │ └── syntax.css │ └── favicon.png └── theme.toml 2.4 配置博客回到 VS Code，打开项目管理，右键自己的项目，选择在当前窗口打开或者新窗口打开。接下来，就可以进行修改了。Hugo 的基本配置都在 config.toml 中，可以参考如下信息： baseURL = "" # 修改为自己的博客地址 languageCode = "zh-CN" title = "Itten's Blog" # 修改“”中的内容为自己的网站名字 theme = "hyde" # 如果以后启用其它主题，在这里替换主题名字 disqusShortname = "" # 如果使用 disqus 评论系统，在这里填写自己的 disqus 用户名 hasCJKLanguage = true enableEmoji = true [permalinks] posts = "/:filenam [Menus] # 边栏目录 main = [ {Name = "Archives", URL = ""}, {Name = "Tags", URL = ""}, {Name = "Photos", URL = ""} ] [params] # 指定发布的文件目录和博客描述 # dir name of your blog content (default is `content/posts`) contentTypeName = "posts" # description abou this website description = "There is only one thing in the world worse than being talked about, and that is not being talked about." [params.valine] # 我把它默认甚至为关闭了，想打开可以修改 false 为 true，填写 valine 的 appId 和 appKey 即可开启 valine 的评论系统。（目前 valine 好评在下降，很多人更换了自己的评论系统，我还没有折腾，暂时不提供这部分教程了。想用的可以参考 操作手册） enable = false appId = '' appKey = '' placeholder = '既然来了，那就留个痕迹吧~' visitor = true修改之后，点击左侧边栏源代码管理，在消息框中随便输入，例如「updata my blog」，点击对勾。点击左下角master旁边的上传，之后可能会有弹窗，需要关联自己的 Github，在弹出的网页中同意关联即可。  现在，网页进入自己的 Github 项目，就会发现，我们本地文件已经全部上传好了，但它还不是最终的博客形态，Hugo 是需要进行编译才能产生静态网站页面的工具，这部分工作，在下一小节我们交给 Github 自动完成。 3 配置 Github Action 实现自动化部署我们在自己的项目中新建一个 gh-pages 分支。  在 Setting 中设置 Token，暂存。Note 也是随便写，勾选 repo 和 workflow 进项目 settings/secrets 新建标题为 personal_token ，内容是刚创建的 tokens ; 回到项目，点击 Action - Set up a workflow yourself 添加如下代码：name: Deploy Hugo # 任君喜欢
on:
push:
branches:
- master # master 更新触发
jobs:
build-deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v1
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: latest
- name: Build
run: hugo
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
personal_token: ${{ secrets.personal_token }} # 填写你自己的 personal_token
PUBLISH_BRANCH: gh-pages # 推送到当前 gh-pages 分支
PUBLISH_DIR: ./public # hugo 生成到 public 作为跟目录
commit_message: ${{ github.event.head_commissage }}
Commit 提交，看看 Action 是不是成功了，再看看 gh-pages 静态文件是否更新，到此，你的独立博客就算搭建成功了，为了方便，可以重新在 VS Code 中下载一遍自己的项目，保证它们的同步。现在可以访问你的博客地址，欣赏一下自己的成果了。 如果你没有改动 config.toml 文件的描述信息，打开它应该是下面这个样子：  现在你就可以在本地的 posts 目录下开始写作了。新建一个 .md 格式的文件，填写下面的基本信息，开始博客之旅。 --- title: date: tags: --- balabalabala...到此，大功告成。可以欢呼了。 后话基础篇到这里就结束了。后面会更新进阶篇，包括域名注册、DNS 解析、VPS 的购买和配置、通过 webhook 将 Github 内容自动拉取到自己的服务器等。 俗话说，工欲善其事，必先利其器，搭建好了的小伙伴，就应该写起来了。 其实说是针对技术小白的傻瓜教程，但是动起手来也不简单。过程中如果遇到什么问题，可以随时联系我。 |
【本文地址】