Github搭建Hexo博客

开始之前

为什么要用Github搭建Hexo的博客呢?首先,省钱!作为一个学生狗,服务器支出是一笔不少的费用,虽然我现在有一台腾讯云1元的服务器,但是这台服务器还有别的用途。用Github搭建网站完全免费。除此之外,Hexo生成的是静态网站,托管在Github上,只要不是有人黑了你的Github帐号,你的网站就很安全。于是我背叛了worldpress转到了Hexo+Github上

准备

  • github建立Repository,名字为你的名字.github.io(如wwillv.github.io)
  • 电脑上安装GitNode.js(国内上不去可以用Node.js中文网)

安装

  1. 在你准备建立Hexo的位置上建立一个文件夹,如blog,cd进入该目录npm install -g hexo安装hexo
    npm install -g hexo
  2. 输入hexo init初始化hexo
  3. 输入hexo g(或hexo generate)生成静态页面
  4. 输入hexo s(或hexo server)启动本地服务hexo s浏览器打开localhost:4000localhost:4000如果你能看到这个界面说明你的hexo搭建已基本成功
  5. 此时你的hexo本地配置已基本完成,可以上传github了,但为了方便我将在本地顺便将主题和插件也一并配置结束,你可以跳过这一步骤直接到上传Github去

配置主题

  1. 主题选择,网上有很多hexo的主题,github上也有很多,我选择的是Next
  2. 大多数的主题的页面都有详细的配置教程,以Next为例
  3. cd进入themes目录,clone仓库到next文件夹git clone https://github.com/iissnan/hexo-theme-next next
    clone
  4. 在 hexo 根目录下 的配置文件_config.yml里设置主题theme: next
  5. 根据自己需要可以继续自定义主题,next主题可以参考这篇文章
  6. 运行hexo clean,运行hexo g后运行hexo s,浏览器打开http://localhost:4000/可以看到自己的新主题的样子了
    最终效果

上传Github

  1. 回到主目录,安装hexo-deployer-gitnpm install hexo-deployer-git
  2. 修改blog文件夹(博客根目录)下的_config.yml,最下面的deploy:修改为如下格式

    1
    2
    3
    4
    deploy:
    type: git
    repo: https://github.com/WWILLV/wwillv.github.io.git(这里是你的仓库地址,后面要加.git)
    branch: master
  3. hexo d(或hexo deploy)将网站上传至github
    上传Github

  4. 网站已建立完毕,访问你的名字.github.io(如wwillv.github.io)即可查看

网站备份

由于hexo上传到Github上是生成的网站,源文件是不会上传的,换电脑后再移动文件很麻烦,这里推荐一个自动备份网站到Github的工具hexo-git-backup,可按照README的介绍进行安装

  1. npm install hexo-git-backup --save安装hexo-git-backup
  2. 修改根目录的_config.yml,加入如下内容:

    1
    2
    3
    4
    5
    backup:
    type: git
    theme: next,landscape,xxx
    repository:
    github: git@github.com:xxx/xxx.git,branchName
  3. hexo b备份文件

  4. 获取备份
    1
    2
    git clone git@github.com:username/username.github.io.git
    git checkout branchname

绑定域名

  1. 注册域名,腾讯云,阿里云(万网),GoDaddy什么的都可以,域名注册商有很多
  2. 一般域名注册都提供域名的解析,解析前ping一下自己的github.io ping wwillv.github.io
    ping
    如图所示我的IP是151.101.229.147
  3. 已腾讯云的解析为例,添加如下2条记录,1条A记录和1条CHAME记录
    解析
  4. 在Github的仓库的设置Custom domain里填入自己的域名(不建议)
    github Custom domain
    在Custom domain设置域名后会发现每次上传后域名都会失效,这是因为设置Custom domain会生成一个CNAME文件,上传后这个文件会被删除,所以可以在\source目录下新建一个CNAME文件。Windows不能直接生成没有后缀的文件,可以先生成一个再用move命令重命名,但这样比较麻烦。如果有touch的话可以直接在目录下执行touch CNAME命令就可以生成了。文件内只需写一行域名即可,如willv.cn
  5. 浏览器输入自己的域名,刷新一会儿就出来了
    fin

开始第一篇文章

hexo new "title"(或hexo n "title")新建一篇文章,也可以在\source\_posts新建一个.md文件。hexo使用markdown语法,文章也是md格式。与平时的富文本的博客不同,写作需要遵循markdown的语法。删除文章直接删除对应的.md文件后hexo g重新生成一下即可。

常用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 #生成并上传

Donate comment here
0%