最近我决定将自己的博客从gihub.io
迁移到自己的独立域名上,并且网站的构建也打算从github开源模板套用转到使用Hugo进行搭建,改变整体风格,让我的小站看起来更日常化、更“软”一点。
基于Hugo模板的网站搭建部署大致需要经过如下步骤:
- Hugo环境配置、模板选择与网站搭建
- 域名与服务器注册、备案
- 云服务器配置
- 调试并完成部署
Hugo环境配置、模板选择与网站搭建
如果想要创建一个个人博客网站我们首先要在本地搭建、设置好自己想要的网站内容。Hugo作为一个生态良好的静态网站生成器可以极大地简化我们的搭建流程。
按照Hugo官方文档进行构建,首先确保安装了相关依赖(git、 go、 以及安装要用到的homebrew)。我是Mac,这里针对Mac环境进行操作:
brew install hugo
安装后重启终端查看自己hugo版本查看是否正确安装
hugo version
检查无误后创建网站项目文件
hugo new site <your-site-name>
cd <your-site-name>
之后我们可以先在Hugo主题页面上选择一款自己心仪的主题作为自己的博客网站模板。
选好后导入主题(这里我们使用Hugo Module进行导入,便于之后对主题进行版本管理和自动更新)
hugo mod init github.com/<your-github-username>/<your-site-name>
echo 'theme = ["path/to/your/theme"]' >> hugo.toml
hugo mod get -u
之后对主题进行配置,配置好后可以通过下面的命令进入本地网页预览效果
hugo server -D
如果需要对主题进行更改可以参考Hugo官方文档以及对应主题的说明进行自定义修改。
域名与云服务器注册、备案
在本地搭建好网站后我们还需要准备一个域名和云服务器,这里可以自行选择。我的域名和云服务器都是从阿里云上购买的,阿里云有学生优惠,服务器+域名的话一年130块钱以内就可以搞定;就我个人比较来看,域名选择.top
性价比更高,三年70多块钱,还是比较划算的。
可以从这个入口查询自己想要的域名是否可注册:阿里云域名查询入口
如果确定无误,可以根据阿里云提供的操作指引自行购买。注册时可以提供个人身份信息模板,便于之后网站备案。
购买好后,我们进入域名控制台,DNS解析我们的域名。按照下图所示操作进入解析界面。
我们需要将我们的域名解析到我们的服务器IP地址。进入页面后点击“添加记录”,记录类型选择“A-”,主机记录输入自己的域名(默认应该已经将www后面的内容输入进去了,我们可以先保持空域名前缀完成空域名前缀的配置),请求来源和TTL默认即可,最后“记录值”填写我们购买好的云服务器的公网IP,点击确定即可将我们的域名映射到服务器的IP上。我们还需要对加"www"前缀的域名进行解析,步骤与上述一致不再赘述。
如果选择国内大厂提供的云服务器,备案一般在网站上都会有相应指导,根据指导进行备案并等待即可,一般十天左右即可出结果。
云服务器配置
进入阿里云控制台登陆我们的服务器:阿里云服务器控制台。第一次登陆会要求我们设置密码,我们输入即可。
之后转回到我们本地的终端,ssh进自己的服务器
ssh root@xxx.xxx.xx.xx
配置远程仓库
如果我们想要之后更加方便地自动上传我们的网页和进行版本控制,就要在服务器上建立git远程仓库。
首先下载git并建立git用户、设置git用户密码
sudo yum install git
sudo adduser git
sudo passwd git
进入用户并创建远程仓库,注意这里建的不是github仓库,而是自己服务器上的git仓库。分别建立文件夹hugo.git作为远程仓库和hugo用来存放仓库文件,也就是之后我们要对网站注入的静态网页(这里用到了Git的裸仓库,区别于Git本地仓库,裸仓库只记录版本信息而不包含实际的项目文件,因此我们需要用Hook将裸仓库于另一个文件夹连接起来,让这个文件夹在裸仓库版本更新时同步我们的工作文件)。
su git
cd /home
mkdir git
cd git
git init --bare hugo.git
sudo chown -R git:git hugo.git
mkdir hugo
sudo chown -R git:git hugo
上面做sudo操作时有可能会报错(权限问题),若报错就用su root
代码进入root用户重新输入上述sudo命令
配置Hook(在git用户下)
vim /home/git/hugo.git/hooks/post-receive
关联裸仓库与存储网页的文件夹并配置权限
git --work-tree=/home/git/hugo --git-dir=/home/git/hugo.git checkout -f
sudo chmod +x /home/git/hugo.git/hooks/post-receive
配置Nginx
下面的操作如果没有特殊说明都是在root用户上完成
安装Nginx
sudo yum install nginx
修改Nginx配置文件
vim /etc/nginx/nginx.conf
找到http,分别将下面的user改成git
、root改成/home/git/hugo
即可
退出,重启Nginx
service nginx reload
service nginx restart
配置ssh公钥
每次进入服务器都要输一遍密码太麻烦怎么办?我们可以在我们的服务器当中配置SSH密钥对,这样我们再次从终端上登陆服务器时就不需要输入密码啦~
关于SSH的原理请见我的另一篇博客:()
我们在本地终端上生成公钥(带pub后缀的就是公钥)
ssh-keygen -t RSA -C "你的邮箱"
cat /.ssh/id_rsa.pub
复制终端中显示的公钥,进入我们的服务器,并输入
mkdir .ssh
touch .ssh/authorized_keys
chmod 600 .ssh/authorized_keys
vim .ssh/authorized_keys
将复制的公钥粘贴到文件中。
至此,我们完成了服务器的基本配置。
调试并完成部署
部署
我们将本地文件hugo.toml
中的baseurl
改成自己的域名
我们需要将本地生成的网页同步到服务器上
首先在本地生成静态资源
hugo -D
同步Git仓库
cd public
git init
git add .
git commit -m "first commit"
git remote add origin git@xxx.xxx.xx.xx:/home/git/hugo.git
git push -u origin master
部署完成。接下来可以在浏览器上输入自己的域名看是否部署成功。
添加自动化脚本
按照上面的步骤每次部署都需要先生成静态网页然后注入到服务器中,步骤还是有些繁琐。因此我们可以用脚本简化我们的流程。
cd
进网站项目文件夹,新建脚本文件
touch autopush.sh
在文件中添加内容
#!/bin/bash
hugo
cd public
git add .
git commit -m 'Update My Site'
git push -u origin master
赋予文件权限
sudo chmod +x autopush.sh
之后每次更新网站运行脚本文件即可
./autopush.sh
免费https证书注册
获取免费证书并使之上线我们的网站前提是我们已经能够通过正常访问我们的域名,如果不能正常访问请完成之前的步骤。
cerbot提供了免费的https证书,按照官方流程进行即可:cerbot证书注册流程
终于我们完成了网站的全部搭建,可以愉快地在自己的网站上发布文章了!!