C1imber's Blog

我的第一篇博客

字数统计: 2.1k阅读时长: 8 min
2017/11/03 Share

github+hexo搭建博客总结

简介

这是我的第一篇博客,为了搭这个博客折腾了好久,本人会把每一步步骤都记录下来供各位需要的小伙伴们参考,因为自己也是折腾出来的,有什么错误的地方还请大佬们多指教~~.

初衷

作为一个研究信息安全的苦逼,一直想找个地方把自己所学的技术同各位小伙伴分享,同时也想找个地方沉淀一下,于是想到了搭一个属于自己的博客,对博客的要求是美观且逼格高,上网找了很多,最终选择了用github+hexo搭建一个属于自己的技术博客,github是一个开源仓库,用的久了一定会发现很多有意思的东西,提升自己的技术,如果各位有和我一样的想法,那么这篇文章或许能帮上你.

第一步:环境准备

那么要想搭建这个高逼格的博客都需要些什么呢?

  • windows环境(本人在windows上搭建的)
  • 安装gitnodejs
  • 注册一个github账号,点击此处去官网注册
  • 可选,如果有需要的话,可以买个域名,推荐狗爹(godaddy),可以选择自己喜欢的域名,我这个域名一年100人民币稍多一点,自己连买了两年,第一年5元多一点
  • hexo,一个一个基于Node.js的静态博客程序,其编译上百篇文字只需要几秒。hexo生成的静态网页可以直接放到GitHub Pages,BAE,SAE等平台上.
  • 最重要的是写文档,这篇文档就是用MarkdownPad2写的,强烈推荐,第一次用很好用,容易上手,有收费的一些扩展,但是可以免费用

第二步:部署自己的Github Pages项目

  • 第一步中github注册成功后,我们登陆我们的账号,然后找到New repository,在Owner中我们会看到自己的用户名,我们在Repository name中填上你的github用户名.github.io,然后再最下面的Initialize this repository with a README打上对勾即可

  • 接下来创建一对ssh密钥,在Git Bash中输入ssh-keygen -t rsa -C "your_email@example.com(你的github注册邮箱地址)",默认回车即可,等到完成时,屏幕会显示如下信息

    Your identification has been saved in /c/Users/you/.ssh/id_rsa.
    Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
    The key fingerprint is:
    xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx your_email@example.com
    
  • 我们便可以在在C:\Users\用户名.ssh\文件夹下看到我们生成的密钥对

  • 接下来将SSH key添加到Github账户,登陆github,找到Settings,点SSH and GPG keys,Add SSH key,将C:\Users\用户名.ssh下的 id_rsa.pub(公钥)内容复制到Key中,Title随便命名即可,完成后输入ssh -T git@github.com,然后有一串问题,我们输入yes就行,然后就会显示:

    Hi username! You've successfully authenticated,
    but GitHub does not provide shell access.
    
  • 现在你已经可以通过 SSH 链接到 GitHub 了,还有一些个人信息需要完善的,输入

    git config --global user.name "用户名"
    git config --global user.email "自己的邮箱"
    
  • SSH Key配置成功,本机已成功连接到github。

第三步:安装与配置

  • hexo的安装与配置:在git和nodejs都安装后(本人安装到了c盘),cmd下输入命令git --versionnode -v,如果都显示出了版本信息,那么就说明安装成功,鼠标右键我们便可以看到Git Bash Here,我们可以在任何目录下打开Git的终端,当然也可以在Git的终端下cd切换目录,windows不同盘符之间相互切换不同于linux,windows直接输入盘符就能切换,然后cd+空格+目录即可,接下来就是安装hexo,在这里我把hexo安装到了E盘,那么在E盘下新建名为hexo的目录(名字随意),然后进入目录鼠标右键->Git Bash Here,打开Git终端,输入以下命令npm install hexo-cli -gnpm install hexo --save ,执行完后你会发现hexo下多了个node_moudles目录,说明安装成功,在这里会出现一个问题,就是我们在cmd下可以运行hexo,但是在Git Bash下,运行就会错误,这时不要紧张,我们把E:\hexo\node_modules\.bin(根据你们自己的安装位置)这个路径添加到环境变量即可,方法:右键我的电脑->属性->高级系统设置->高级->环境变量,然后在系统变量那一栏找到Path这个环境变量,点编辑,在结尾添加一个;,然后把刚刚的路径加到分号后即可,这时就能在cmd和Git Bash下运行hexo了
  • 搭建博客:经过上一步的安装,我们便可以在自己的电脑上搭建博客了~,我们在自己想选择的盘新建一个目录,如My Blog,然后进入该目录后创建一个名为github用户名.github.io的目录(和第一步的必须一样),然后进入该目录,执行Git Bash进入Git终端,运行hexo init,这条命令初始化hexo,然后npm install这条命令可以自动帮我们安装需要的组件,然后我们便可以在本地体验hexo了,输入hexo g命令生成静态文件,输入hexo s启动服务,然后在本地浏览器输入http://localhost:4000/便能看到自己的博客

第四步:安装主题插件

  • 第三步中我们看到的自己的博客主题是hexo自带的,hexo为我们提供了100多种主题供我们选择,各位小伙伴可以根据自己的喜好选择,进入Hexo的官网主题专栏,本人选择了简约的Next,黑白的简约风格,很好看,然后进入的你博客目录下,右键进入Git Bash,输入git clone https://github.com/iissnan/hexo-theme-next themes/next下载该主题,该主题的中文文档,可以按照自己的需求配置,配置完成后hexo cleanhexo g,hexo s,我们便可以看到新的主题了

第五步:将本地的Hexo文件更新到Github的库中

  • 在终端中运行如下命令npm install --save hexo-deployer-git安装hexo-deployer-git插件,注意命令一定要顺序一定要输对,否则会出现hexo d后 ERROR Deployer not found: git的错误:

  • 在 自己博客目录下的_config.yml 中修改参数,如下所示:

    deploy:
    type: git
    repo: https://github.com/your_name/your_name.github.io.git
    branch: master
    
  • 在Hexo文件夹下执行:hexo g -d,执行完之后会让你输入github的账号和密码,输入完后就可以登录我们自己的部署在Github Pages服务器上的博客了。对应的地址是 username.github.io(我的是:Lawliet96.github.io).然后既可以看到和本地一样的效果

绑定独立域名

  • 购买域名,在godaddy上选择自己的域名,我选的是lawlietweb.com,因为实在很喜欢死亡笔记的L,哈哈,然后登陆自己的godaddy账号,选择dns,会出现一个dns表,我们只需把A @这一行的ip改为192.30.252.153GitHub的空间地址即可,接着配置CNAME文件,在自己博客目录下的source目录下创建文件 CNAME (新建记事本文件命名CNAME,然后打开)内容为你的域名,例如我的域名是:lawlietweb.com,在Git Bash中输入hexo g -d,然后过一段时间访问我们自己的域名便可以看到自己的博客了

总结

  • 这些步骤其实很简单,但是自己却折腾了8个多小时,因为自己按照网上的资料一步步做下来后发现出了很多错误,于是自己百度一一解决了,于是写下这篇文章给给位爱折腾的小伙伴参考,然大家少走点弯路,最后希望大家支持我的博客,感谢了

参考资料

CATALOG
  1. 1. github+hexo搭建博客总结
    1. 1.0.1. 简介
    2. 1.0.2. 初衷
    3. 1.0.3. 第一步:环境准备
    4. 1.0.4. 第二步:部署自己的Github Pages项目
    5. 1.0.5. 第三步:安装与配置
    6. 1.0.6. 第四步:安装主题插件
    7. 1.0.7. 第五步:将本地的Hexo文件更新到Github的库中
    8. 1.0.8. 绑定独立域名
    9. 1.0.9. 总结
  2. 1.1. 参考资料