Hexo搭建Github-pages个人博客

搭建个人博客

作为一个后知后觉的coder,才发现Github的好,看到了用Hexo搭建的Github pages博客,内容简洁、清晰,闲来无事中自己也搭建一个博客,不为别的,只为记录一些自己在学习过程中的点点滴滴,也当做笔记吧,毕竟好记性不如烂笔头,再者别人也可以看看是否在学习过程中有跟我同样的困惑,方便解决问题。

环境配置:

在搭建博客之前,我们需要做一些准备工作,把所需要的各种环境及其他内容准备好,这样方便我们快速搭建博客。

  • 1.安装Node.js
  • 2.安装Git
  • 3.Github账号申请及创建远程仓库

安装Node.js

根据自己电脑的操作系统去下载对应的安装包并安装,具体的安装过程这里不再叙述,网上百度一大堆,安装好之后可以在cmd命令窗口中去检查是否安装好了,若安装成功会提示对应的版本信息。

node -v
npm -v

安装Git

在Git官网去下载对应的安装包,安装之后我们可以在电脑桌面空白处右键,会在弹出菜单中出现Git Bash选项,也可以打开它,在里面输入以下命令查看版本。

git --version

这里我们需要配置一下环境变量,将Git的安装路径在系统环境变量PATH中配置一下,这样就可以在CMD命令窗口中直接调用Git,不需要打开Git Bash,配置好之后可以在cmd命令窗口中输入以上命令查看。

Github账号申请及创建远程仓库

去Github官网注册一个账号,如果已经注册可以跳过次步骤。

创建一个远程仓库,这里需要注意的是仓库名必须是username.github.io,这里的username是指你在Github的用户名。例如我的:yshijie.github.io

打开这个仓库,点击该仓库中的Settings选项,找到Github pages,去选择一个主题即可。到这步时其实我们已经可以去访问username.github.io这个网址了。到此准备工作就完成了,我们开始用Hexo去配置博客。

安装Hexo

在合适的地方建一个文件夹作为我们本地的博客仓库,然后打开CMD命令窗口进入该目录,输入以下命令并执行:

npm install hexo-cli -g

等待他自己去安装hexo,完成之后输入以下命令:

npm install hexo --save

执行完之后,hexo就算是安装好了,我们可以通过以下命令去检查是否安装完成:

hexo -v

Hexo相关配置

初始化Hexo

输入以下命令:

hexo init
hexo install

执行之后npm会自动安装相应的组件,等待完成,接下来就可以相应的操作了。

输入以下命令:

hexo d -g
hexo s

前面是将hexo生成对应的站点并部署,后者是启动本地服务,我们可以输入该网址去查看我们的博客界面:

http://localhost:4000/

连接Github pages与Hexo

首先设置Git的用户名和邮箱:

$ git config --global user.name "username"
$ git config --global user.email "your email address"

生成秘钥

ssh-keygen -t rsa -C "your email address"

我们也可以通过该命令来查看秘钥文件内容:

cat /Users/username/.ssh/id_rsa.pub

一路回车下来,打开秘钥文件,默认地址为:

C/Users/your name/.ssh/id_rsa.pub

复制其中的内容,打开Github的Settings,选择SSH Key的选项,新建一个SSH Key,将该内容复制进去,注意前后不要留空格和回车,其他的默认即可。

打开我们之前建的文件中,找到_config.yml文件,这是配置文件,打开它找到deploy并修改:

deploy:
    type: git
    repo: git@github.com:yourname/yourname.github.io.git
    branch: master

这里需要注意的是,冒号后面有个空格。到此我们就将Hexo与Github pages博客链接起来了。

新建博客

新建博客之前我们先安装一个扩展,以后部署的时候方便:

npm install hexo-deployer-git --save

新建博客

hexo new post "文章题目"

完成之后我们的文件夹中的source/_post/目录下会生成一个”文章题目.md”的文件,选择一个MarkDown编辑器去编辑内容,然后执行(生产,部署或部署前先生成):

hexo g 
hexo d

或者

hexo d -g

设置主题

Hexo有很多主题供我们选择,具体喜欢哪个每个人都不一样,这里我就拿我自己喜欢的一个主题来说,也就是我的博客设置的主题Next主题,感觉这个主题比较简洁,黑白两色,留白较多,比较大气看着。

下载Next主题

为了熟悉命令的使用,我们依旧用命令去下载Next主题:

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

使用该主题

打开根目录下的_config.yml文件,找到theme,修改主题:

theme: next

配置好之后我们可以用面的步骤去生成部署,启动本地服务去查看一下。剩下的就是根据的自己风格去配置根目录下的_config.yml文件或者/themes/next/_config.yml文件。