Featured image of post 个人网站的建立过程（二）：使用Hugo框架搭建个人网站
网站

个人网站的建立过程（二）：使用Hugo框架搭建个人网站

使用Hugo框架搭建个人网站（个人博客）

本网站运行在我的私人电脑上，此处记录一下本网站的建立过程。

缘起

在购买了域名之后就一直想用这个域名搭建一个个人网站。刚开始曾尝试过使用Hexo作为静态网站框架，但在使用过程中发现由于Hexo中并没有对多语种的原生支持，只能使用一些与国际化有关的插件（i18n），因此在我想尝试搭建一个中英双语的网站时遇到了数不清的问题，最终决定放弃，并转投Hugo框架。

Hugo是一个用Go语言开发的静态网站生成器，以生成网站速度快著称，我则是看中了它原生支持多语言的特性。更多关于Hugo特性的介绍，可移步Hugo官网https://gohugo.io。本网站的“关于”页面中也有一些对Hugo框架的简要介绍。

前置条件

配置网站服务器

本网站使用nginx作为HTTP服务器，服务器电脑使用深度操作系统（deepin OS），静态网站框架使用Hugo。

安装并配置nginx

  1. 安装nginx 
    1

    sudo apt install nginx
  2. 开启nginx服务 
    1

    sudo systemctl enable nginx

安装并配置Hugo

  1. 用apt或snap安装Hugo之后遇到了1313端口被占用的报错，于是改为下载deb包直接安装。首先在Hugo项目GitHub仓库的Release页面下载最新版的适用于Linux Debian系系统的deb安装包，最好下载“hugo_extended”版本，如hugo_extended_0.92.2_Linux-64bit.deb。下载后使用dpkg包管理器安装： 
    1

    sudo dpkg -i hugo_extended_0.92.2_Linux-64bit.deb
  2. 在终端输入如下命令查看是否安装成功： 
    1

    hugo version
  3. 初始化网站。在本地服务器电脑上创建一个文件夹，用来存放网站文件。例如把文件夹路径为~/Documents/www/ 
    1

    mkdir -p ~/Documents/www
    然后用Hugo新建一个站点，站点名称为website1： 
    1
2

    cd ~/Documents/www
hugo new site website1
    Hugo将在~/Documents/www/website1下创建网站模板。
  4. 本地测试。在本地浏览器上测试创建的网站： 
    1

    hugo server
    可以在本地服务器电脑上打开浏览器，输入默认的地址http://localhost:1313，如能看到Hugo生成的默认网页即表明网站在本地配置成功。

网站域名绑定

目前，我们的网站只能通过http://localhost:1313在本地服务器电脑的浏览器上访问，要想让该网站可以被世界各地的用户访问，我们需要给它绑定一个域名。

  1. 创建nginx配置文件，将本地网站文件目录与域名绑定。 为了避免污染nginx原有的配置，我们新建一个配置文件：

    1
2
3

    cd /etc/nginx
sudo mkdir vhost
sudo touch blog.conf

    这将在/etc/nginx/vhost目录下创建一个针对我们网站的配置文件blog.conf。向blog.conf文件中写入如下配置内容（注意，需要sudo权限才能写入这个文件）：

    server{
        listen 80;
        root /home/YourUserName/Documents/www/website1/public;
        server_name www.your.domain.name;
        location /{
        }
    }

    注意，这里我们将域名指向了~/Documents/www/website1目录下的public文件夹，而非整个website1目录。因为我们不想暴露一些私有文件。

    如果你想为其他网站绑定域名，可以仿照上述格式加入另外的配置。

  2. 为了让nginx识别到我们创建到配置文件/etc/nginx/vhost/blog.conf，我们在nginx的配置文件中包含此文件。在nginx的配置文件/etc/nginx/nginx.conf中找到http的配置block，在花括号结束前的一行中加入如下一行：

    include /etc/nginx/vhost/*.conf

    这将让nginx自动读取我们在/etc/nginx/vhost目录下创建的配置文件。再次重新加载nginx服务后，我们的域名就指向了在本地服务器电脑上创建的网站目录。

  3. 更新nginx服务，并使用Hugo部署网站：

    1
2
3

    sudo nginx -s reload
cd ~/Documents/www/website1
hugo -D

    这样，我们就可以在其他电脑上输入域名（如http://www.your.domain.name）来访问我们创建的网站了！

配置SSL证书

完成上述工作后，我们的网站可以被世界各地的用户以HTTP方式访问。HTTP是“超文本传输协议”，其内容以明文传输，因此安全性很差。现在的大多数网站都使用更安全的HTTPS协议，而且不少浏览器都会限制使用HTTP协议的网站。因此当用户访问我们的网站时，浏览器会对用户发出安全警告，在搜索引擎的搜索排名中，我们的网站也会被降低权重，所以我们有必要将网站的传输协议升级为HTTPS。

HTTPS协议依赖于SSL加密，需要申请SSL安全证书。很多SSL安全证书都需要付费申请，但也有一些网站提供免费的SSL安全证书，例如ZeroSSL。

创建ZeroSSL账号

前往ZeroSSL官方网站https://zerossl.com，创建一个个人账号。

使用acme.sh生成并自动定期更新SSL安全证书

直接在ZeroSSL网站上申请的SSL证书有效期一般只有60或90天，因此如果直接申请证书，那么每隔一段时间就需要重新申请。这里已经有人制作了自动从ZeroSSL申请并定期更新证书的工具acme.sh，我们参照里面的说明，在我们网站的本地服务器电脑上为我们的网站安装SSL安全证书。

具体过程参见acme.sh的说明，这里简述我们的网站需要用到的步骤和命令。

  1. 安装acme.sh 
    1

    curl  https://get.acme.sh | sh -s email=[email protected]
  2. 由于我们使用阿里云的域名，这里我们选择手动DNS的方式生成证书。具体说明参见这里。简单来说，就是利用阿里云提供的域名管理API（即我们在上一篇帖子“个人网站的建立过程（一）：购买个人域名并配置动态域名解析”中提到的Access key）。我们可以登录阿里云账户重新获取一个Access key，也可以使用之前生成的Access key。将Access key导出为系统变量Ali_Key和Ali_Secret，注意不要泄露此信息，这关系到我们阿里云账号的安全。 
    1
2

    export Ali_Key="sdfsdfsdfljlbjkljlkjsdfoiwje"
export Ali_Secret="jlsdflanljkljlfdsaklkjflsa"
    然后用下面的命令生成证书： 
    1

    acme.sh --issue --dns dns_ali -d your.domain.com -d www.your.domain.com
  3. 复制/安装证书到使用的地方。默认生成的证书都放在安装目录~/.acme.sh/下，但我们不直接使用安装目录下的证书，而是将它复制到指定到目标位置。 
    1
2
3
4

    acme.sh --install-cert -d your.domain.com -d www.your.domain.com \
--key-file /home/YourUserName/Documents/www/website1/private/key.pem \
--fullchain-file /home/YourUserName/Documents/www/website1/private/cert.pem \
--reloadcmd "sudo service nginx force-reload"
    上述命令在复制完证书后，会重启nginx服务以使HTTPS生效，需要输入sudo的密码。
  4. 修改nginx的配置文件，以支持HTTPS协议。在配置文件/etc/nginx/vhost/blog.conf中添加如下配置内容（注意，需要sudo权限才能写入这个文件）：

    server{
        listen 443;
        ssl on;
        ssl_certificate /home/YourUserName/Documents/www/website1/private/cert.pem;
        ssl_certificate_key /home/YourUserName/Documents/www/website1/private/key.pem;
        root /home/YourUserName/Documents/www/website1/public;
        server_name www.your.domain.name;
        location /{
        }
    }

  5. 重定向HTTP请求到HTTPS。在配置文件/etc/nginx/vhost/blog.conf中添加如下配置内容（注意，需要sudo权限才能写入这个文件）：

    server{
        listen 80;
        server_name www.your.domain.name;
        return 301 https://$host$request_uri; }

  6. 更新nginx服务 
    1

    sudo nginx -s reload
    就能使用HTTPS协议访问我们的网站啦！快在其他电脑上以https为前缀输入你的域名（例如https://www.your.domain.name ）试试吧！

路由器设置

很多路由器默认都是不暴露内网设备的端口的，因此想要从公网访问我们网站的服务器，还需要在路由器上设置端口转发，让访问我们的域名的流量转发到网站服务器对应的端口上。例如上述nginx的配置中，我们的网站监听443端口的服务请求，就需要在路由器上设置转发443端口。

comments powered by Disqus