用Hexo配合GitHub快速上线自己的个人博客

不想买服务器却又想创造属于自己的网站?Hexo可以帮你。

啥是Hexo

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

本教程可以让你快速上线属于你自己的博客。

事前准备

你需要安装两个东西:Git和Node.js

Git的安装教程在这儿

Node.js可以直接在这儿下载,不要忘记把它加到环境变量中去。

安装完之后可以在命令行中输入

➜ git --version #输入这个,下面是显示的内容
git version 2.28.0.windows.1
➜ npm --version #输入这个,下面是显示的内容
6.14.8

如果均有回显版本号(可能你的版本和我的不一样),那么就说明安装成功了。

接下来因为要用到npm这个包管理器,所以先给npm的镜像站点换成国内的淘宝源,命令如下:

➜ npm config set registry https://registry.npm.taobao.org

然后准备工作就全部完成了。

安装Hexo

需要以下几个命名,按顺序执行就行了:

➜ npm install hexo -g #安装hexo
➜ npm install hexo-deployer-git --save #安装hexo的一个插件包,用于Git部署

安装完之后,你需要建立一个文件夹专门用来存放你的博客的文件,然后打开那个文件夹,在该文件夹里打开命令行窗口(Windows用户可以选择通过按住Shift并在文件夹窗口空白地区右键来打开PowerShell),现在需要初始化你的网站,命令行输入:

➜ hexo init #初始化hexo站点,init=initialize

此命令会从远程仓库克隆基础的Hexo站点模板,视你的网络条件(你懂)此过程可能持续数分钟,然后你的文件夹里会多很多文件,主文件夹结构大致如下:

├─node_modules #太大了不展开了
├─scaffolds
├─source #要展示在网页上的资源文件
│ └─_posts #存放博客内的博文和媒体文件,博文以markdown存储
└─themes #存放主题文件,自带一个landscape主题,此处以它为例,如果要用其他主题也请放入这边
└─landscape #主题存放文件夹,此处有主题的配置文件_config.yml
├─languages
├─layout
│ ├─_partial
│ │ └─post
│ └─_widget
├─scripts
└─source
├─css
│ ├─fonts
│ ├─images
│ ├─_partial
│ └─_util
├─fancybox
│ └─helpers
└─js

然后,你可以在命令行执行以下语句来清理已有网站内容

➜ hexo clean

正式使用Hexo

先介绍几个Hexo使用的基本命令:

➜ hexo generate #或者 hexo g,用来跟据你写好的md博文生成新的网页文件并链接
➜ hexo server #或者hexo s,用于在本地的4000端口(127.0.0.1:4000)实时预览你的网页
➜ hexo new 'xxx' #新建博文,会在主文件夹/source/_posts文件夹下创建xxx.md与同名媒体文件夹

编辑博文请在md文件内,博文的资源文件(如图片)请放到同名文件夹中并在md文件中使用相对地址链接来完成(比如./xxx/233.jpg)。

——————那么做到这步我就假定你已经在刚刚生成的.md文件中写完文章了——————

部署Hexo博客到GitHub

毫无疑问你得先注册个GitHub,如果还没有的话,点这里去注册

然后新建一个仓库,注意这个仓库必须是开源的,而且名字有一定要求:必须是 用户名.github.io

例如我的GitHub的id是legr4ndk,那么我的仓库名就是legr4ndk.github.io。

新建仓库之后,你可以在仓库里找到你仓库的链接,就像这样:

https://github.com/YourGithubID/YourRepoName.git

然后打开你的本地Hexo文件夹,有个_config.yml文件(注意不是主题文件夹里的那个),使用你的代码编辑器打开它,划到最下面有个deploy标签,你需要编辑一下:

#原来是这样的
deploy:
type: ''

#你需要把它改成
deploy:
type: 'git'
repository: https://github.com/YourGithubID/YourRepoName.git #这边写的是你的仓库链接,我这个只是范例

#注意冒号之后有空格

第16行还有个标签叫url,你需要把后面的值改成你的仓库名称,比如这样:

url: http://YourGithubID.github.io

然后保存即可。

在部署前你必须使用hexo g重新生成网页文件。你可以运行hexo s命令先在本地检查你的网站还有没有问题。

部署使用一个命令:

➜ hexo deploy #或者hexo d,把本地生成的文件部署到GitHub上

如果你是第一次在命令行上面使用GitHub,那么将会有一个弹窗要求你登录你的GitHub,之后,你的网站将会被推送到GitHub上。过几分钟你就可以通过你的仓库名作为URL访问你的网站了。比如我的网站的地址就是legr4ndk.github.io

注意事项

  1. GitHub因为国内特殊环境可能出现无法访问,这个需要魔法上网。
  2. 每次deploy之后都需要几分钟后才能刷新观察到变化,切勿心急
  3. 每次写完新文章或者更换主题什么的之后,必须使用hexo g重新生成文件之后再部署
  4. 主题可以去这里寻找自己喜欢的,点击主题名字可以直接跳转主题的GitHub页面,跟据上面的教程安装即可。更改主题请去本地Hexo主文件夹的_config.yml内的theme标签更改。
  5. 主题内可能有部分依赖,建议换主题后在主题文件夹的命令行内运行npm install一键安装依赖(有的主题可能不行,建议查看主题的项目下的安装教程)。

到此为止你已经可以上线一个基础的个人网站了,接下来就是跟据主题的README.md文件介绍的那样去自己订制网页了。

Have fun~