用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。

注意事项

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

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

Have fun~

Mo1a's blog