前言

一般来说技术人都有自己的博客用来记录，或者你也可以作为生活博客来记录生活，除了像CSDN，博客园这种公有的博客之外，还可以搭建自己的博客，想一想访问自己博客的自定义域名是一件多么cool的事。那么搭建博客要选用的方案就很多了，分为动态和静态，也就是有后台和没有后台的区别，有后台的博客程序例如PHP的Wordpress和Typecho，Java写的halo等，都是很成熟的博客软件，那么有后台就需要有云服务器，抱着白嫖至上的原则，我们可以选择静态博客。本地静态博客的原理是通过博客引擎将写好的markdown文件渲染成静态的前端页面，然后通过git推送到github pages服务或者是vercel上，再去注册一个便宜域名，就能美滋滋地享受个人网站的博客了。

这里我选择了hugo而不是hexo，主要还是喜欢hugo的渲染速度，并且配置更加简单。

下载与配置

下载

直接到官方GitHub下载你喜欢的版本,并解压到你喜欢的文件夹

配置

将存放exe的路径添加到环境变量PATH中

站点

新建

选择一个适合的文件夹，打开终端输入命令

1

hugo new site blog

这样会在文件夹中创建一个新文件夹blog

或者输入

1

hugo new site .

这将直接在本文件夹中创建网站

出现这样的信息证明创建站点成功

那么我们按照指示cd到hugo目录，会发现这里有许多文件夹，不要慌，初期你只需要知道几个文件夹/文件的作用就行了

archetypes 这个文件夹放着创建页面的模板
content 存放所有的文章与页面，一般文章都集中放在posts目录下
static 放置所有的静态资源，比如图像什么的，都会集中放置在img里
themes 存放主题
hugo.toml hugo博客的配置文件，hugo博客的配置文件支持三种：toml、yaml、json，三者的优先级从高到低

配置

如果你用过hexo的话，就会知道hexo有一款默认主题叫landscape，默认安装，所以我们创建站点后可以直接本地server，但hugo不同，hugo没有默认主题，需要先装一个，才能启动

可以在官网挑你喜欢的主题，本文选择diary主题作为演示，个人很喜欢这个极简主题

安装主题

这里我直接用git拉了，其实还有几种安装方法，可以直接去官网看官方文档

cd到themes文件夹，输入命令

1

git clone https://github.com/AmazingRise/hugo-theme-diary

拉取完成即为成功

用vscode打开站点的根文件夹（即有配置文件的文件夹）选中hugo.toml文件，文件内容如下：

1
2
3


baseURL = 'https://example.org/'   #站点网址
languageCode = 'en-us'            #默认语言
title = 'My New Hugo Site'			#站点标题

在下面加一条

1

themes = 'hugo-theme-diary'

切换到终端，输入

1

hugo server

本地运行成功

点击提供的本地链接，就可以访问站点了

这样，最简单的配置就完成了

配置主题

单单加载了配置文件的博客还光秃秃的，还需要进一步配置

为了快速配置，大部分主题都会有exampleSite文件夹，打开此文件夹

将config.yaml文件（也有可能是其他配置文件格式）复制到根目录，由于加载优先级的原因，我们得先把原有的hugo.toml重命名，避免它被先加载

再次使用本地加载的指令

可以看到现在多了许多的东西

其他的配置可以去看主题的配置文档，一般都会写的

新建

通过指令即可新建文章与页面

1

hugo new posts/title.md

一般的主题都会将文章及页面的路由放在 content 目录下，所以当你设置 menu 菜单时要注意路由问题，否则会404

部署

推送到Github

放在本地看完全不够，为了能让大家伙都看到，我们需要将博客的静态文件推送到Github上去

在仓库页面点击new

那么推送到Github还需要配置SSH连接，怎样生成公钥私钥并把公钥添加到Github的教程网上更多，这里就不赘述了

cd 到根文件目录执行命令

1

hugo

就会多出一个 public 文件夹，这个文件夹就需要我们推送到Github

复制一下

cd 到 public 文件夹，执行

1
2
3
4
5


git init
git remote add origin [email protected]:用户名/仓库名.git
git add .
git commit -m "first commit"
git push -u origin master

这样就把文件推送到master分支了

后续的推送：

1
2
3
4
5
6


hugo 
cd public
git add .
git status
git commit -m "add commit"
git push

Vercel部署

如果你使用了Github pages服务，那么部署到此结束，如果不是，那么接着往下看

进入控制台->选择 add new project ->选择你博客的仓库，点击 import ，点击 Deploy ，应该很快就能完成部署

然后选择 Domains ，选择 Add ,会提供域名的解析位置，添加到你的解析服务器上，很快就能访问了

至此，部署完成

评论系统

评论系统我推荐 waline 和 twikoo

这两都挺不错的，是静态博客拥有动态评论系统很好的选择

博客搭建

hugo博客搭建教程

前言