BrightLoong's Blog

Hexo+Github搭建个人博客(一)——开始搭建

title-picture
  前段时间本人利用业余时间,在网上查询各种资料,使用Hexo+Github的方式搭建起了我个人的博客——BrightLoong相信网上已经有无数前辈写了类似的文章来记录如何搭建博客的过程和步骤,我也不哗众取宠或者班门弄斧了,把我在搭建博客中使用 资料做一个收集,同时也将我在搭建博客过程中遇到的坑列举出来,以及对应的解决方法,也是对搭建博客过程的一个记录,毕竟好记性不如烂笔头。那话不多说,接下来就是一个简单的介绍以及如何搭建的步骤(本文基本也是安照官方的步骤在介绍,我只是在有些地方记了下自己踩过的坑,强烈建议大家跟着Hexo官方文档操作)。

本文适用于Windows搭建

正文

什么是Hexo

  在Hexo官网上如此描述:Hexo is a fast, simple and powerful blog framework. You write posts in Markdown (or other languages) and Hexo generates static files with a beautiful theme in seconds.(Hexo是一个快速,简单和强大的博客框架。你可以使用Markdown(或其他语言)写博客,之后Hexo能在几秒钟生成具有美观主题的静态文件。)如果你想了解更多关于Hexo的东西,请移步Hexo官网

  Hexo是一款基于Node.js的静态博客框架,可以deploy到Github上,所以首先要在电脑上安装git和node.js,并在Github上注册自己的账号,由于这些东西不是本篇博客要涉及到的主要内容,你可以谷歌、百度,也可以参考我下面提供的链接。

Git安装

  你可以去官网下载Git,因为国外资源可能很慢,你也可以下载我在网盘上提供的Git镜像。具体如何使用,请参照廖雪峰老师关于Git的教程,如果你仅仅是想安装git那看看Git安装的那个章节

Node.js安装配置

  关于Node.js的安装以及配置,可以参照菜鸟教程上面关于Node.js安装配置的教程,上面也有下载的链接,本人就是参照上面安装的。具网上有些文章说,安装完成后最好重启电脑,以免之后无法使用hexo的相关命令,我倒是没有遇到,不过如果大家遇到这种问题就重启吧。

Hexo安装

  必须要在你安装了上述的Git以及Node.js之后才能进行Hexo的安装。

1. 用以下命令安装Hexo

  在任意地方点击右键,选择Git Bash Here

$ npm install -g hexo-cli

  如果安装过程中遇到一下错误:

ERROR Deployer not found : github

  运行

$ npm install hexo-deployer-git --save

2. 创建博客存放目录,并进行初始化,安装依赖包(最好不要使用带中文的路径,以免后面出现不必要的麻烦)

  打开一个目录,在这个地方点击右键选择Git Bash Here,执行以下命令

$ hexo init <folder> #创建目录并执行初始化
$ cd <folder>
$ npm install #安装依赖包

<folder>改为你想要的目录。
  当然你也可以自己新建一个目录,比如我在F盘中创建了myblog目录,进入目录中点击右键选择Git Bash Here,直接执行以下命令

$ hexo init 
$ npm install

  不管你用哪种方式,执行完毕后你会发现以下目录结构

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

3. 启动服务

  执行以下命令来启动服务

$hexo g #hexo generate,生成静态文件
$ hexo s #hexo server,启动本地服务器

  如果启动过程中没有报错,此时你用浏览器访问http://localhost:4000/,是不是看到了一个Hello World的博客页面,hexo3.0使用的默认主题是landscape(之后我会讲如何更换主题,以及集成第三方的工具),而且此时的服务是本地启动的,别人并不能看到(继续我接下来的操作就好了)。

  这个时候如果在浏览器没看到漂亮的博客页面怎么办,别急,先确认你在启动过程中是不是报错了,如过有的话估计是上面的操作有误,如果没有并且发现页面一直在加载中,估计是端口被占用了,我就遇到了这个问题。怎么办?把4000端口给杀死,还有更简单的——在hexo s命令后面加上启动参数,修改默认端口:hexo s -p <port>,比如我用的 hexo s -p 8000,现在重新访问http://localhost:8000/记得把地址的8000改成你自己对应的端口号,是不是看到了美丽的界面。

4. 注册Github账号,并创建仓库。

  想要别人也访问到你的页面,跟着继续吧。首先在Github官网上注册一个账号,有账号的跳过注册,直接登录。登录后找到new repository按钮创建一个新的仓库。

new repository

  然后填写repository name就行了,要注意的是:这个名字的格式必须为youname.github.io,并且必须和你的账户名相同,比如我的账户名是BrightLoong,我的地址就是brightloong.github.io(最开始我就是将name随意填写,虽然是这个格式但是根本访问不了,会报404的错误)。
creat repository

5. 将本地文件推送到github

  最后,剩下的就是将本地文件推送到github上了,首先打开站点配置文件_config.yml,比如我的路径是:F:\myblog_bonfig.yml。找到最后的deploy属性,如果没有就自己添加,将配置修改为:

deploy:
  type: git #推送方式
  repository: https://github.com/BrightLoong/BrightLoong.github.io.git #你的推送地址
  branch: master #你要推送的分支

这个地方要注意的是属性后面的冒号必须要有一个空格,否则会报错

  配置好之后使用以下命令将服务部署到github上。

$ hexo clean
$ hexo g
$ hexo d

  使用hexo d命令,第一次会要求你输入用户名和密码,用户名和密码就是你注册github时候使用的用户名和密码。如果遇到以下错误:

ERROR Deployer not found : github

  运行

$ npm install hexo-deployer-git --save

  再执行上面的命令。

$ npm install hexo-deployer-git --save

  如果你没有配置Github的SSH,那么可能需要配置一下,你可以用以下命令查看一下

ssh -T git@github.com

  如果成功会有以下提示(我的账户名叫BrightLoong)

Hi BrightLoong! You've successfully authenticated, but GitHub does not provide shell access.

  如果没有,可以参考博客git添加ssh-key查看config

  如果没有报错误,那么博客就已经搭建起来,并发布到Github上了,在浏览器输入youname.github.io就能看到自己的博客了,如果中途报错说未识别的用户名,那么如果你确定你填写是正确的,重复使用hexo d命令,我当时就遇到过这种情况,我估计是网络不好引起的。

结尾

  博客已经搭建起来了,是不是正如Hexo所说——fast, simple and powerful,这篇文章就说这么多。之后我介绍如何发布文章,更换主题,站点配置文件,以及如何集成第三方应用(多说评论、百度分享等)。希望对大家有帮助。

版权声明:本文为博主原创文章,转载请注明出处 BrightLoong’s Blog

坚持原创技术分享,您的支持将鼓励我继续创作!