情人节，那就给她做一个网站吧！

时间已经进入了2020年，人们都说“未来已来”，学者写文章都喜欢用“人工智能、大数据、云计算”作为引言中的一部分，恋爱也发展成了云恋爱。（要是没有疫情谁愿意网恋？？？）作为我们在一起的第一个情人节，觉得做一个网站送给我老婆，比较契合当前的时代主题。网站如下图，自我感觉还是能够送的出手的……链接是yuanyuanjie.cn。（因为没有用HTTPS，所以用微信打不开，感兴趣的朋友可以复制链接到浏览器端打开浏览。不过个人建议还是算了，为什么要主动吃狗粮呢- -）

一、前期准备

前期准备包括云服务器购买，域名购买、解析与备案等工作。另外，还要思考两个重要的问题，做什么网站，怎么做。我喜欢写点东西，也喜欢写情书，何不以一个精美的博客的形式，把情书整理在一起？怎样实现呢？有两种思路：第一种是从头到尾全部、从前端、后端到数据库端建设网站，但是这种方式工程量巨大，一个人建设需要花费1-2个月的时间；第二种是使用博客框架。使我下定决心的是看到了知乎上的一句话“绝大部分的前端设计本质都是重复的，后台设计也是很重复的”，为了不浪费时间于繁冗的HTML、CSS、JS编程，把时间花在页面的设计上，我决心使用博客框架。

二、框架的选择

博客框架有许多，例如基于PHP和Apache的WordPress，基于node.js和nginx的Hexo，基于Ruby的Jekyllrb，基于Go语言的Hugo，基于Vue的VuePress，基于Java的Solo……付出了一定的学习成本和时间成本之后，我决定使用Hexo^[1]，原因无他，因为我懂一点node.js和nginx，有一定的先验知识的情况下，排坑会少花一点时间……

三、网站的建设

按照官网（hexo.io/zh-cn/）的介绍，Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。使用Hexo框架进行开发的主要步骤还是比较清晰，虽然囿于个人水平还是觉得坑比较多- -

（1）安装博客框架

在安装框架之前，需要确保自己的电脑已经安装好node.js环境和Git，博客框架的安装主要是两条语句。Hexo的安装在Hexo文档^[2]里有详细的介绍。

$ npm install -g hexo-cli
$ echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile  //配置环境变量

（2）建站流程^[3]

Hexo的建站非常简单，在Cmd里使用如下命令，Hexo将会在指定文件夹中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后，指定文件夹的目录如下，_config.yml能够设置网站的标题、副标题、设置的皮肤等基础信息，在source/_posts中存储着我们的文章，themes文件夹存储着主题文件。以上3个路径是在开发过程中经常用到的。同时，在安装新的依赖时，最好也看看package.json文件哦。

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

在完成基础流程之后，比较重要的环节是选择主题，可以在Hexo 主题官网^[4]选择，也可以通过百度（or 谷歌）“Hexo 主题”来选择。个人感觉这个环节比较重要，主题代表着网站的风格，同时在选择的过程中还应该仔细思考这个主题的重新编程的难度。例如我选择的主题是diaspora，在选好之后，需要在_config.yml中找到“theme”属性标注自己主题的名字。

（3）网站元素设计

自己的网站需要设计自己网站的元素。我的网页的主题是情书归纳，将网站的title定为：“love · jie”，并设计了标题的样式（左）和logo（右）。

网站的内容均来自我们的情书，发自肺腑。网站的图片代表着网站的质感，网站图片选择手绘漫画的形式，甜甜的软萌风格。部分图片来源于网络^[5]，如有侵权，立马删掉。

（4）页面调整

在下载好主题文件之后，其中同样有一个_config.yml文件，需要根据自己的需要配置网站。同时，应该仔细阅读每一个文件的代码，弄清楚这个主题的架构方式，以及在demo页中各个网页元素相应的代码位置。大意就是：知道怎么按自己的思路改这个网站，例如改一改网站的icon、head、menu这些东西，为了实现自己的想法改改css和js之类的，这个过程比较繁琐，就不赘述了。

（5）文章编写

文章是基于markdown编写的，需要仔细阅读主题文件中的readme，例如在我的主题diaspora中的markdown格式如下。

---
title: My awesome title
date: 2016-10-12 18:38:45
categories: 
    - 分类1
    - 分类2
tags: 
    - 标签1
    - 标签2
mp3: http://domain.com/awesome.mp3
cover: http://domain.com/awesome.jpg
---
 
 
（文章正文）

若需要插入图片，需要先安装插入图片的插件，然后建立与文章同名的文件夹，使用markdown语法插入到文章中。（引自：【Hexo】hexo在文章中添加图片^[6]）

npm install hexo-asset-image --save

（6）网页生成

在完成开发后（或者在开发的过程中），使用hexo g生成静态网页，生成的网页会放置在public文件夹下。使用hexo s命令，可以在浏览器键入“localhost:4000”看到网站的效果。

hexo g
hexo s

四、上传云服务器

在自己的云服务器（我的机器是阿里云的轻量级云服务器，系统是CentOS 7.8）上同样需要安装node.js，同时还需要安装nginx，nginx的安装命令如下。

yum install -y nginx

安装完成后启动nginx，并设置开机自动启动。

systemctl start nginx
systemctl enable nginx

由于我的网页是静态网页，只需要在/etc/nginx路径下找到nginx.conf，在server_name后面加上自己的域名，在root 后面加上存放网页的路径，例如我的路径是“/home/www/website”，记得加分号。

上传云服务器可以使用Git一键上传，但是我太菜了，也没怎么用过Git，弄了一天都没有弄好，就用Xftp 6（WinSCP也可以）将public下的网页文件复制到“/home/www/website”中，完成了这一步，也就算完成了整个网站的搭建。

第一次使用框架，遇到的坑很多，很考验Linux和nginx的知识储备，对于我这种业余爱好者也充满挑战，对于整个开发的过程我感觉还有很大的提升空间，比如：

•认真读一遍Hexo文档；•认真学一遍Git和GitHub的操作，用更高级的方法上传服务端，提高文章编写和上传的效率。

写在后面

开发一个网站送给老婆，也作为爱情结晶过程的参照物，我感觉还是很有意义的，幸好老婆也喜欢。这篇文章仅仅作为一个开发思路的记述，由于时间有限也省略了很多细节，还请朋友们见谅。最后，抓住情人节的尾巴，也祝大家，有情人终成眷属~

References

[1] Hexo: https://hexo.io/zh-cn/
[2] Hexo文档: https://hexo.io/zh-cn/docs/index.html
[3] 建站流程: https://hexo.io/zh-cn/docs/setup
[4] Hexo 主题官网: https://hexo.io/themes/
[5] 网络: http://k.sina.com.cn/article_2769180072_pa50e55a802700chn9.html
[6] 【Hexo】hexo在文章中添加图片: https://blog.csdn.net/u010996565/article/details/89196612