返回

How I build my blog with hugo

搭建这个博客确实花费了了我较多的时间,虽然是使用了较为成熟的框架和现有的主题模板,但是仍然花费了我将近一周的时间来完成我的博客和文档。

在这里写下这篇文档的目的是为了解决将博客部署到自己服务器(注意不是github pages)的问题。而且不会面面俱到,而且需要一定的linux、git操作基础,所以不会的人建议去找有手就行的教程。

你需要什么

一个服务器,域名可有可无。服务器上需要安装如下内容:hugo(建议安装扩展版,去hugo官网和github release中获取),git,建议安装nodejs,这个也有一些坑。本地同样需要安装上述的这些内容,nodejs除外。

开始

在完成服务器的hugo安装之后,执行hugo指令,我们可以看到相关的指令提示,说明安装成功,首先是服务器端

创建你的hugo博客并配置主题

要知道的一个知识点是,要想在自己的服务器上部署静态博客,那么先使用一些框架hugo、hexo通过模板生成静态网页文件之后,使用nginx代理到对应目录即可。所以我们要做的也就是上述几步。

首先找一个你喜欢的目录,接下来我的操作都在/data目录下。在目录下执行

hugo new site blog

创建一个名为blog的hugo博客。创建成功之后即可使用ll指令看到当前目录新增的blog文件夹,cd进入,可以看到大致的结构。

需要注意的是,因为hugo默认没有主题,所以首次使用还需要去网上clone主题到theme文件夹。这里使用一个看起来还不错的主题:bootstrap主题

image-20211123004136601
image-20211123004136601

点击download即可进入它的git仓库,复制git clone的信息。因为我们此时在theme目录,所以执行:

git clone https://github.com/razonyang/hugo-theme-bootstrap.git

等待git将仓库clone到本地。在clone完成后,就可以看到多出的新文件夹,在网上作者创作的主题仓库往往包含了完整的内容,但是仍有部分主题在clone下来后还需要用户自己在执行一些操作。以geekdoc主题为例,将主题git到theme目录之后,你需要进入其目录,并执行如下指令(人家的仓库里也这样写的)

npm install
npx gulp default

而其它的主题各自有各自的配置方法(绝大多数的不需要特意执行)。

在主题配置好之后,为了放置之后出现一些git submoddle的错误,建议直接执行

rm -rf theme/主题文件夹/.git

即移除掉git下来的主题文件的git信息。此时回到博客的根目录,执行

cp theme/主题文件夹/examplesite/* . -r

即将主题文件夹中的实例内容拷贝到博客根目录,这样可以减少很多配置的时间,尤其是配置文件的写。这里要注意的一点是,由于配置文件config的后缀不同,有可能在上述拷贝的时候覆盖失败,在此情况下你需要删掉hugo默认的config文件。

git仓库创建

至此,我们在服务器的hugo就配置的差不多了。对于一些想要挂到github pages的人而言,只要上述操作在本地完成,并git到github仓库上基本上就差不多了。若想以服务器作为git仓库还是需要继续的。

接下来是服务器端git仓库的创建,在博客的根目录下执行:

git init
hugo
git add .
git commit -m 'xxx'

使得博客编译并经过第一次commit,同时为了方便本地git,我们再进行两个指令进行配置:

git config receive.denyCurrentBranch ignore
git config receive.denyCurrentBranch updateInstead

前者是忽略其他push时直接合并到主干的报错,另一个则是在本地push时立即将内容更新到服务器端。

经过上述操作,服务器端仓库的就配置好了,接下来要做的是在本地端进行clone和公钥获取。这里感谢zjc大神的帮助,往常从服务器端获取ssh密钥需要复杂的步骤,在他的指导下,可以通过一个指令直接实现密钥的获取。

ssh-copy-id ubuntu@xxxx.com #或者是ssh-copy-id xxx@ipv4

上述指令直接将服务器端ubuntu用户(或是xxx)用户的密钥复制到本地,从而之后的git操作不需要屡次密码输入。

之后本地找个合适的目录执行

git clone ubuntu@ipv4:/data/blog/.git

等待git成功(这个步骤还是相当快的)。可以看到服务器的内容都被clone下来,之后我们便可以在本地进行修改,并将修改push到服务器端:

hugo
git add .
git commit -m 'xxx'
git push

为了方便进行内容的push,可以写一个bat脚本实现一步部署,放到本地博客的根目录下:

# deploy.bat
hugo
git add .
git commit -m 'finished'
git push
echo Finished!
set /p pause=

每次本地更新内容后,只需要双击执行deploy.bat即可。

nginx代理

nginx神通广大,这里用它做代理来将通过端口的流量代理到你的静态博客内容。

默认你的nginx已经安装且在云供应商开放了相应的端口,那么接下来要做的就很简单了,就是修改nginx.conf中的内容。

编辑nginx.conf的内容(貌似需要提前更改权限,此外也可以通过一些ssh软件直接修改)

vim /etc/nginx/nginx.conf

可以看到如下结构

events
http{
	(server)
}
#mail

我们要改的就是server这部分,在http结构中添加如下内容:

server {
        listen 80;
	listen [::]:80;
        server_name blog.zidea.site;
	location / {
        	root /data/myblog/public/;
        	index index.html index.xml;
	}
 }

不难理解,服务器名字为blog.zidea.site(这里是解析了二级域名),也可以直接填写ip。监听的是80端口(未备案下是无法监听这个端口的,需要更换其他端口),location则是你博客生成静态文档文件的地方。在完成上述部分后,保存,执行nginx的热更新

nginx -s reload

完成之后就可以在你监听的站点上看到你的部署的静态博客了。

Licensed under CC BY-NC-SA 4.0