【教程】搭建个人博客——Hugo+GitHub+Netlify+Cloudflare

Wed, 14 Sep 2022 00:00:00 +0000

TODO: 为本文章添加一些图片以使教程更为清晰快去催作者，他实在太懒了

前置知识

Markdown入门
能够进行基本的终端交互，Win: CMD/PowerShell. Linux: Shell， Mac: Terminal
Git基本知识

准备工作

必需
- 能够安装GO和Hugo的计算设备（如果你把它移植到了烤面包机上……也不是不行）
- 能够访问互联网和较为现代的浏览器（如果你能够访问到这篇博客，那应该没什么问题QwQ）（但我不建议你在带屏幕的烤面包机上完成后续的操作）（大雾）
- 由于GitHub和在中国大陆内访问不稳定，最好使用一些加速工具（因为需要用到GitHub账号和仓库，故镜像网站不推荐使用）
  - 推荐（真没收钱╰（‵□′）╯）
    - Watt Toolkit
      - 优点：开源、跨平台
      - 支持架构：arm64，x64
      - 下载渠道：
        
        Microsoft Store
        
        AUR
        
        GitHub Releases
    - 修改本地hosts（相对来说不推荐，似乎成功几率不高）
      1. 访问 IP Address->GitHub
      2. 在 “What are GitHub DNS Records” 中，你能找到一个Type为A的记录，这个就是GitHub的服务器地址，将其加入hosts，可以绕过DNS污染，但是不能访问被墙的网站。
可选
- 一个域名
  - 优点：自定义访问域名
  - 成本：非顶级域名约 50￥/年
- 额外的CDN加速
  - 优点：更快的访问速度
  - 成本：QAQ我还没用过，如果有机会之后更新

具体步骤

Hugo

原本想说“如果你不需要在本地编译预览或者不想了解Hugo，那么这个步骤可以跳过”，但仔细想来，如果不了解Hugo，可能也不会选择主题，也不知道要怎么和框架相配合，故还是希望你能了解一下啦，很快的

简介

Hugo是一个基于GO的静态网站生成框架，类似的有基于Node.js的Hexo，相比于Hexo，Hugo的优点在于极快的编译速度和较为方便的配置，不足之处在于较少的主题和插件支持。尽管如此，这并不意味着Hugo没有优秀的主题，但如果你认为Hexo的一些主题非常吸引你，并且预估自己不会有太多的博客文章的情况下，Hexo也是不错的选择。

如果想了解更多，这篇文章很不错Hugo 与 Hexo 的异同

文档

安装与基本命令

Hugo 快速开始指引

注意有一些主题需要Hugo extended version，安装时尽量选择extended version

选择主题

官方网站主题汇总

主题推荐（以下不做排名，请按照自己喜欢的风格和功能选择）

Stack (本博客正在使用该主题)
PaperMod
LoveIt
NexT
MemE

GitHub

如果你使用GitLab等类似的平台，只要Netlify支持，本质是通用的

注册账号

（如果你已有账号，可以直接登录）

找到右上角“Sign Up”
按照提示输入邮箱等信息
完成注册！

使用主题

每一种主题的实际使用方式和配置教程还是根据作者给的文档来比较稳妥，在这里难免挂一漏万，不过基本来说，根据作者是否提供了template，可以分为两种上传到GitHub的方式

在GitHub建立仓库

作者提供template 比如Stack，作者提供了template，直接访问，之后右上角绿色按钮“Use this template"便可以在Github中建立仓库，之后用git clone到本地便完成了这一步骤
作者未提供template 在Github新建仓库，然后在本地打开终端，选择一个合适的文件夹，执行命令hugo new site 你的网站文件夹名，然后cd 你的网站文件夹名，执行git init，git submodule add 链接 themes/主题名字，其中链接是你选的主题的GitHub仓库链接，例如https://github.com/theNewDynamic/gohugo-theme-ananke.git 之后，将本地仓库和GitHub远程仓库建立链接，push上GitHub

配置主题

根据作者提供的文档手册配置 (TODO: 以Stack为例提供配置指南)

Netlify

我的网络可以直接打开，如果打不开可能需要科学上网，请参考其他科学上网教程

登录账号

找到右上角“Sign in”
这里可以直接使用GitHub账号登陆

建立站点

找到屏幕中间 Add new site 下拉菜单，选择 Import an existing project, 之后选择一个Git平台，如果你之前一直按照本教程使用GitHub，那么在这里就选择GitHub，之后选择授予Netlify访问你仓库的权限，之后就可以选择之前建立或者上传的仓库了。
其余全部默认，只需要更改构建命令，找到 Basic build settings 中的 Build command 选项，输入 hugo --gc --buildFuture, 你可以参考Hugo的文档，根据自己的需要更改
等待构建完成
可以设置二级域名，即netlify.app之前的域名

至此，个人博客的功能性部分已经搭建完成，接下来要解决的是访问速度以及SSL证书的问题，如果不在乎这两点或者不想再折腾，到此为止其实也可以了

（可选）域名

存在可获得的免费域名，比如freenom,或者EU.rog,如果只是短期玩一玩，是可以考虑的，不过，免费域名存在很多限制，所以如果打算长期建站，还是从域名提供商购买比较好

从域名提供商购买，考虑到国内支付的便利性，优先推荐腾讯云或者阿里云如果能够进行国际支付，也可以选择在Cloudflare购买域名

接下来的示例以阿里云为基础

(TODO：图片)

（可选）Cloudflare

需要拥有域名才能使用CDN加速

注册账号

因为有中文版本，所以会很方便

添加站点

(TODO：图片)

成品展示

这个网站 QwQ

参考

个人博客搭建教程作者：爱扑bug的熊

【教程】在树莓派4B上运行code-server

Wed, 14 Sep 2022 00:00:00 +0000

This guy is too lazy, the post is still not finished yet…

You can urge him to update through bilibili or github :)

技术 on 花叶呢喃

【教程】搭建个人博客——Hugo+GitHub+Netlify+Cloudflare

前置知识

准备工作

具体步骤

Hugo

简介

文档

安装与基本命令

选择主题

GitHub

注册账号

使用主题

在GitHub建立仓库

配置主题

Netlify

登录账号

建立站点

（可选）域名

（可选）Cloudflare

注册账号

添加站点

成品展示

参考

【教程】在树莓派4B上运行code-server