详细教程—用github pages与hexo搭建属于自己的免费博客

本文前些准备工程只针对于Mac用户,请windows用户右转google查询如何安装基础环境。
但后来想一想,感觉这样不人道,就把windows的教程也一起写了吧


准备

你需要以下环境:

1
2
3
4
5
6
7
8
9

ruby(Mac自带环境)

npm

node.js

git

首先是windows

  1. 配置Node.js环境

下载安装包:

https://nodejs.org/en/download/

Ps:如果自己不知道自己版本,请右转google

安装过程就像安装其他软件一样,这里不做过多描述,毕竟这不是重点。

安装之后打开命令行(按win+R后输入cmd即可),键入

1
2
node -v
npm -v

来检查是否安装成功并且可以观察安装版本。

(由于笔者没有安装windows,所以此处暂时没有截图)

  1. 配置git环境

    会使用git应该是每一个程序员的必备技能,所以这里的安装步骤只针对普通用户,请IT从事着直接略过此步骤,当然如果你闲的蛋疼可以继续阅读。

    下载git传送门:https://github.com/git-for-windows/git/releases/download/v2.6.3.windows.1/Git-2.6.3-64-bit.exe

    安装步骤一如既往即可,然而这一步windows用户需要注意

    安装时注意一下

    请勾选第二个,这样可以让你在命令行中直接调用git 指令

    同样,安装之后可以通过此命令来检查是否安装成功以及检测版本

    1
    git -v

    到这里,前期配置算是简单完成了

Linux以及Mac用户

  1. 安装git

    我就想问问,还有谁没装Git么?

    1
    2
    3
    // 如果已安装HomeBrew 无需执行此行
    $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    $ brew install git // 安装Git

    你也可以通过下载安装程序来安装https://sourceforge.net/projects/git-osx-installer/

  2. 安装node.js

    先安装nvm,这是这是Nodejs版本管理器,可以轻松切换Nodejs版本。 这里有两种方式安装。如果使用curl的方式安装,安装完成之后一定要重启终端。

    Homebrew 安装方式,此安装方式无需重启

    1
    2
    3
    $ brew install nvm 
    $ mkdir ~/.nvm $ export NVM_DIR=~/.nvm
    $ . $(brew --prefix nvm)/nvm.sh

    curl安装方式

    1
    $ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

    安装完成后,重启终端 并执行下列命令即可安装 Node.js。

    1
    $ npm install 4

    安装Hexo

    以上所有都安装完成之后再安装Hexo

    1
    $ sudo npm install hexo-cli -g

    到这里,前期配置算是简单完成了

注册git账户

  1. 接下来注册git账户,若已有忽略此句;若没有,请右转https://github.com/自行注册

  2. 注册之后去为自己申请一个仓库

    点击github主页右上角的一个加号,点击后再点击New repository

    进入代码仓库创立界面

    Respository name 中的username.github.io 的username 一定与前面的Owner 一致,记住你的username下面会用到。

    完成仓库的建立

    Create repository

  3. 开启你的github仓库的github-pages功能

    进入你的仓库后点击settings,在下面找到

    点击即可

开始使用hexo搭建你的博客

接下来进入重点话题

  • 建立本地站点

    先在你的电脑里找一个文件夹用来存放你的本地数据,或者新建立一个

    然后用命令行或者终端进入那个文件夹,键入

    1
    2
    3
    4
    5
    6
    git init 
    git add
    git commit -m "创建仓库"
    git add origin 你仓库的ssh连接
    git push origin master:master
    //这个部分在创建你的github仓库里有详细介绍

    然后键入

    1
    2
    hexo init
    npm install //下载一些必要的组件

    它会下载一些hexo的基本文件

    此时你就可以开始观察这个初始网页了,当然是通过你本地的服务器

    1
    2
    hexo g          //渲染文件
    hexo s //预览文件

    在浏览器中输入 http://localhost:4000/ 就可以访问了

  • 接下来就开始具体更改你的博客基础设置

    修改全局配置文件,_config.yml

    你可以在_config.yml中修改大部分的配置

    hero官网传送门:http://hexo.io/zh-cn/docs/configuration.html

  • 配置Deployment设置

    首先设置你的git用户,还是跟上文一样,若已配置,请自行略过

    1
    2
    git config —global user.name “yourname"
    git config —global user.email “youremail"

    然后在_config.yml中同样设置Deployment

    1
    2
    3
    4
    5
    6
    deploy:
    type: git
    repository: git@github.com:yourname/yourname.github.io.git
    //这里必须使用ssh,不能使用http ,切记切记,否在后来用hexo时会有一些奇怪的bug
    branch: master
    //这里的分支看自己的心情使用即可,没有过多要求

    ssh查看地址:

    点击”Use HTTPS“即可查看你的http地址

    然后在当前文件夹下键入

    1
    hexo d -g

    就可以通过http://yourname.github.io 来访问自己刚刚上传的网页

添加新文章

在当前目录下找到source文件夹,所有的文章都会以”.md”的格式存入其中(其为markdown文档格式)

新建的文章题头需要加入一些yml信息

1
2
例如:title:文章的名字
date:日期

这些配置可在当前主题目录下的_config.yml中设置

注意:冒号与后面所写的内容间必须要有空格,否则待会在使用hexo时会出现一些奇怪的问题

每次添加文章后都要键入 hexo g 来渲染,否则直接 hexo s 预览的话是没有效果的

为你的博客选择主题

hexo主题传送门:https://hexo.io/themes/

选择合适的主题后要在当前目录下git clone下来 (不会右转google)

然后在主文件夹的_config.yml中的theme:后替换成你刚刚选择的主题

然后在进入下载的主题的文件目录下,进入主题的_config.yml来修改偏好设置 (更多设置 http://theme-next.iissnan.com/getting-started.html#theme-settings

注意配置的键值之间一定要有空格。

为你的博客更换域名

  • 首先,需要注册一个域名。

    在中国的话,.cn全都需要进行备案,如果不想备案的话,请注册别的顶级域名,可以使用godaddy(https://www.godaddy.com/)或新网(http://www.xinnet.com/)或万网(http://www.xinnet.com/)中的任意一家,自己权衡价格即可。

  • 然后,我们需要配置一下域名解析。

    推荐使用DNSPod的服务,比较稳定,解析速度比较快。

    接着对你新买的域名进行dns配置,由于每个网站的dns配置方法不同,笔者不在这里一一例举,你们可以自己去网站上阅读配制方法。

  • 最后我们对github进行一些配置

    在主目录下的host文件里新建一个叫CNAME的文件,不需要后缀名。在里面输入你所买的域名即可

    然后键入

    1
    hexo d -g

    来上传到github仓库

    同时进入你的github仓库里,在这里也输入你的域名(按理说如果已经上传CNAME文件就不用在这里设置,但是笔者发现只单独设置一个还是不行的,可能是我脸黑吧)

    然后你所做的就是等待就可以了,dns配置是很费劲的,中途需要修改NS服务器,设置A解析等等,都需要一定的时间。短则10分钟,长则24小时,最长不会超过72小时。如果超过72小时,请检查自己的配置过程,或者修改自己本地的DNS服务器。

如何安装hexo的插件

插件传送门: https://hexo.io/plugins/

下载方法插件里都会介绍,主要就是使用 npm install 来下载插件,后面要加上—save,表示依赖项

插件下载之后,需要在主目录的_config.yml中添加如下内容,并且根据插件的要求再添加一些语句(图中是笔者所安装的几款插件之一,也是使用hexo必备插件)

接下来是在搭建博客中会碰到常见的问题汇总,这篇博文写的还是很详细的,但是里面还是没有你所遇到的问题直接讲报错信息粘贴到google吧

https://xuanwo.org/2014/08/14/hexo-usual-problem/