1.建站初衷

(曾经用过的域名:www.anleeno-xu.top现已弃用 )很久之前就有这个想法,毕竟可以把自己的一些idea分享出来以供交流,但是考虑到购买服务器什么的比较头疼就没有做。后来很多代码托管平台提供了静态网页等相关服务就让这件事变得简单了,而且是免费提供,空间性能都还够用,比较适合搭建个人网站。

2.什么是 Hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

3.为什么选择 Hexo?

建立网站无非基于四点:前端页面的实现,后端功能的实现,数据库的维护,服务器的维护。鉴于个人网站的规模很小,也不需要太多交互,所以后面两个基本上不作太多考虑。静态博客最大的优势就是没有数据库,可以很方便的迁移,也不用担心安全问题。相比其他诸如Wordpress等框架,Hexo 生成的是静态文件,不仅对服务器负载小,而且访问快速。Hexo 还提供了200+ 主题,而且可以高度自定义,这对于颜控无疑是福音。

4.建站过程

经过一波介绍,Hexo 的优点显然还是比较多的,那还等什么,just do it!

4.1.安装

推荐阅读 官方文档

4.1.1.准备工作

安装 Hexo 相当简单。然而在安装前,必须检查电脑中是否已安装下列应用程序:

  • Node.js (至少Version 6.9);
  • Git(方便使用各种命令和下载推送代码);
  • npm (一般Hexo会自带);

几个注意事项:

  • 很多命令既可以用Windows的cmd来完成,也可以使用git bash来完成,但是部分命令会有一些问题,为避免引起不必要的麻烦,建议使用git bash来执行.
  • hexo不同版本差别非常大,基本上很多网上教程都是V5.x、V6.x版本的,甚至更早,注意不要被误导.
  • hexo有2种_config.yml配置文件,一个是根目录下的全局配置文件,一个是各个theme下的主题配置文件.

4.1.2.创建Github仓库

仓库是为了用平台服务器存放你的网站数据,方便其他人访问,不然个人网站就是一个本地项目了。

新建一个名为 username.github.io的仓库(username为Github用户名),必须是你的用户名,其它名称无效,将来你的网站访问地址就是 https://yourusername.github.io 了,网站所有相关代码都是放在这个仓库里面。

注册的邮箱一定要验证,否则不会成功!

接下来只需要使用npm即可完成Hexo的安装。

npm install hexo-cli -g

4.2.Hexo初始化

在电脑的某个盘新建一个名为xxxhexo的文件夹(名字自拟),由于这个文件夹将来就作为你存放代码的地方,所以最好不要随便放。然后执行以下命令:

$ cd 文件夹路径

$ hexo init

命令执行后,hexo会自动下载一些文件到这个文件夹。

Hexo常见命令:

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本

缩写:

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

组合命令:

hexo s -g #生成并本地预览
hexo d -g #生成并上传

hexo s是开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容。第一次初始化的时候Hexo已经有一篇名为 Hello World 的样板,默认的主题比较简洁,可以去 Hexo 的主题栏选择一个喜欢的,这是 官方主题中心

4.3.替换主题

我使用的是Next主题,比较简洁美观。

Next主题

首先下载这个主题:

$ cd hexo目录路径

$ git clone https://github.com/theme-next/hexo-theme-next themes/next

修改全局配置文件_config.yml中的theme: landscape改为theme: next,然后重新执行hexo g来重新生成静态文件,打开浏览器访问 http://localhost:4000 即可看到漂亮的Next主题。

4.4.上传代码到仓库

在上传代码到Github之前,记得先把你以前所有代码下载下来,虽然Github有版本管理,但备份一下总是没错的,因为从Hexo提交代码时会把你以前的所有代码都删掉。
如果你一切都配置好了,发布上传用hexo d就行了。

4.4.1.配置用户名和邮箱

第一个需要配置的就是用户的用户名和email,这是因为Git是分布式版本控制系统,所以每个机器都必须自报家门:你的名字和Email地址,这些内容会出现在你的每一个提交(commit)里面,方便控制。配置邮件地址和用户名:

$ git config --global user.name "username"// 你的github用户名,非昵称

$ git config --global user.email "xxx@qq.com"// 填写你的github注册邮箱

4.4.2.配置ssh key

为什么要配置这个呢?因为你提交代码肯定要拥有你的Github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。

$ cd ~/. ssh #检查本机已存在的ssh密钥

如果提示:No such file or directory 说明你是第一次使用git。

$ ssh-keygen -t rsa -C "邮件地址"

到光标等待录入的时候连续3次回车,最终会生成一个文件在用户目录下,打开用户目录,找到.ssh/id_rsa.pub文件(C:/Users/xxx.ssh),记事本打开并复制里面的内容,打开你的github主页,进入相应仓库的设置 -> SSH and GPG keys -> New SSH key,将刚复制的内容粘贴到key那里,title随便填,保存。

4.4.3.测试是否成功

$ ssh -T git@github.com # 注意邮箱地址不用改

如果提示Are you sure you want to continue connecting (yes/no)?输入yes,然后会看到:

Hi xxxxx! You've successfully authenticated, but GitHub does not provide shell access.

看到这个信息说明SSH已配置成功!

4.4.4.配置_config.yml文件

配置_config.yml中有关deploy的部分:

deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  branch: master

此时直接执行hexo d的话一般会报错:Deployer not found: github 或者 Deployer not found: git,原因是还需要安装一个插件:

$ npm install hexo-deployer-git --save

部署这个命令一定要用git bash,否则会提示Permission denied (publickey).
打开你的git bash,输入hexo d就会将本次有改动的代码全部提交,没有改动的不会。

4.5.保留CNAME等文件

提交之后到仓库上一看,发现以前其它代码都没了,此时不要慌,一些非md文件可以把他们放到source文件夹下,这里的所有文件都会原样复制(除了md文件)到public目录的。由于hexo默认会把所有md文件都转换成html,包括README.md,所以需要每次生成之后、上传之前,手动将README.md复制到public目录,并删除README.html。

4.6.发表博客

使用cd 命令定位到我们的hexo根目录,执行命令:

hexo new "博客名"

hexo会帮我们在_posts下生成相关md文件,我们只需要打开这个文件就可以开始写博客了,默认生成的内容只有前三项,一般完整的格式为:

文章格式

当然你也可以直接自己在XXXHexoBlog/source/_posts新建md文件,用这个命令的好处是帮我们自动生成了时间。

写好之后保存文件,用hexo d -g命令部署到仓库,然后访问仓库地址https://yourusername.github.io就可以了。

Last modification:August 22, 2020
喜欢就加个鸡腿吧!