搭建个人博客
作为一个后知后觉的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文件。