罗淑芳Selina的个人博客-关注并分享前端设计与技术的个人博客网站

Hexo+Github 高逼格个人博客搭建指南(准备篇)

我这个个人博客已经搭建好很久了,但是因为不能直接编辑还有进行各种配置,觉得很麻烦就放弃了。然后坚持了一段时间的博客园,也放弃了,原因是文本编辑起来太麻烦,而且有种种限制,回头看看hexo,界面简洁漂亮,还能自定义,况且逼格够高,研究了一两天,觉得很有意思,现在不在北京,时间也充裕了许多,个人博客应该是进入IT界就开始经营的东西,结果到现在我的博客也没有个样子。现在写这个搭建指南,既是旧知识的回顾总结,又是新知识的学习记录,同时希望看到的朋友多多指正,如果有幸帮助了别人,意义就更大了。废话不再多说,现在正式入主题。^O^

git

下载并安装git

进入git下载页面,下载合适的版本,并安装。一路 Next ,到了 Select Components 界面,勾选 Git Bash HereGit GUI Here。一路 next,完成安装。
右键桌面,会看到右键菜单多了 Git Bash HereGit GUI Here 两项。此时我们就可以在资源管理器中使用git了。
注意:我这次换了电脑重新安装git后发现右键git bash虽然弹出窗口,但当前目录竟然不在Desktop,后来发现是因为开启了搜狗壁纸的图标整理,关掉图表整理就好了。

github

申请github账号

1.注册github,填写昵称,输入邮箱地址,设置密码,没问题后点击 Sign up for GitHub 按钮。
2.这时页面跳转,这里要选择成为免费用户还是付费用户,当然了,我们选择免费用户就好了,除非你土豪你不在乎你就付费吧。O(∩_∩)O~

3.第三步会让你选择一些如开发水平、注册github的目的等,这些都是可选项,然后点击 Submit 按钮,完成注册。

邮箱验证

1.登录github,点击右上角的头像,会出现一个列表,点击Settings。

2.进入设置页面后,右侧导航中 Emails 会有一个警告图标,这是因为还未验证邮箱。进入你的注册邮箱(即Primary主邮箱)进行验证,若没有收到验证邮件,那么点击Resend重新发送。

SSH的配置

在Settings页面我们可以看到 SSH and GPG Keys 标题,在这里我们可以将本地生成的ssh key添加到github,这样github就会信任这台机器,本地的代码就可以上传到github上了。
1.首先,桌面右键点击 Git Bash Here,打开命令窗口。

2.输入如下命令,后面的邮箱就是你的主邮箱。

1
$ ssh-keygen -t rsa -C "your_email@example.com"

3.回车,让你输入保存key的目录,可以不填,回车;让你输入一个密码,可以不填,回车;确认秘密,可以不填,回车。
4.成功生成key并显示保存路径,例如:

5.用记事本工具打开id_rsa.pub,全选复制;打开github,进入Settings,选择 SSH and GPG Keys,点击 New SSH key 按钮,title随便写,将复制的key粘贴到Key下的文本框内,点击 Add SSH key 按钮。

建库

我们需要在github上建一个repository以便未来存放我们的博客。
1.点击右上角的+,在下拉列表中选择 New repository

2.填写你的repository名称,一般个人网站都会写成xxx.github.io,到时候访问的时候这个就是你个站的地址,比如我的就是selina0526.github.io,其中selina0526是我github的用户名;填写该库的描述,也可以不写;选择是Public(公开)还是Private(私有),区别就是前者谁都可以看,但你来选择谁可以修改库中代码并提交,后者是你来选择谁可以看谁可以修改提交。然后点击 Create repository

3.页面跳转后,点击Settings,在页面底部找到 Choose a theme 按钮。


4.选择主题,这里我们直接点击 Select theme 就可以了,因为我们后面要使用hexo,这个主题也就没什么用了。

hexo

终于可以安装hexo了!!!^O^ 这个就简单了

安装hexo

1.首先桌面右键 Gti Bash Here打开命令窗口,输入如下命令全局安装hexo。

1
$ npm install -g hexo

2.新建一个文件夹,作为hexo的站点目录,具体位置你自己选择。进入该目录,右键 Git Bash Here,输入hexo初始化命令,执行成功后,站点目录下就会有hexo框架内容了。

1
$ hexo init

3.下载所需依赖,站点目录下会出现名为node_modules的文件夹,里面放的都是hexo所需要的依赖包。

1
$ nmp install

4.执行hexo generate,生成博客目录public,再执行hexo server,启动服务器;访问 http://localhost:4000/ 就可以查看本地博客了。