越来越多的朋友选择自己架设自己的博客,以来方便个性样式二来也能带来不少收入,大部分朋友都会选择wordpress搭建个人博客,这里为大家分享使用Hexo+Github搭建开发者博客的方法,需要的朋友可以参考下

大概可以分为以下几个步骤

搭建环境准备(包括node.js和git环境,gitHub账户的配置)
安装Hexo
配置Hexo
怎样将Hexo与github page 联系起来
怎样发布文章
主题 推荐
主题Net的简单配置
添加sitemap和feed插件
添加404 公益页面
搭建环境准备

大概可以分为以下三步

  • Node.js 的安装和准备
  • git的安装和准备
  • gitHub账户的配置

配置Node.js环境

下载Node.js安装文件:
https://nodejs.org/zh-cn/download/
根据自己的Windows版本选择相应的安装文件,要是不知道,就安装32-bit的吧- -。

可以通过我的电脑 > 右键 > 属性

如图所示:

保持默认设置即可,一路Next,安装很快就结束了。 然后我们检查一下是不是要求的组件都安装好了,同时按下Win和R,打开运行窗口:

Windows的运行界面

在新打开的窗口中输入cmd,敲击回车,打开命令行界面。(下文将直接用打开命令行来表示以上操作,记住哦~) 在打开的命令行界面中,输入

node -vnpm -v

如果结果如下图所示,则说明安装正确,可以进行下一步了,如果不正确,则需要回头检查自己的安装过程。

配置Git环境

下载Git安装文件:
https://git-scm.com/downloads
然后就进入了Git的安装界面,如图:

Git安装界面

和Node.js一样,大部分设置都只需要保持默认,但是出于我们操作方便考虑,建议PATH选项按照下图选择:

Git PATH设置

这是对上图的解释,不需要了解请直接跳过 Git的默认设置下,出于安全考虑,只有在Git Bash中才能进行Git的相关操作。按照上图进行的选择,将会使得Git安装程序在系统PATH中加入Git的相关路径,使得你可以在CMD界面下调用Git,不用打开Git Bash了。
一样的,我们来检查一下Git是不是安装正确了,打开命令行,输入:

git --version

如果结果如下图所示,则说明安装正确,可以进行下一步了,如果不正确,则需要回头检查自己的安装过程。

github账户的注册和配置

如果已经拥有账号,请跳过此步~

Github注册

打开https://github.com ,在下图的框中,分别输入自己的用户名,邮箱,密码。


然后前往自己刚才填写的邮箱,点开Github发送给你的注册确认信,确认注册,结束注册流程。

一定要确认注册,否则无法使用gh-pages!

创建代码库

登陆之后,点击页面右上角的加号,选择New repository:

新建代码库

进入代码库创建页面:

在Repository name下填写yourname.github.io,Description (optional)下填写一些简单的描述(不写也没有关系),如图所示:

注意:比如我的github名称是gdutxiaoxu ,这里你就填 gdutxiaoxu.github.io,如果你的名字是xujun,那你就填 xujun.github.io

代码库设置

正确创建之后,你将会看到如下界面:

接下来开启gh-pages功能,点击界面右侧的Settings,你将会打开这个库的setting页面,向下拖动,直到看见GitHub Pages,如图:

点击Automatic page generator,Github将会自动替你创建出一个gh-pages的页面。 如果你的配置没有问题,那么大约15分钟之后,yourname.github.io这个网址就可以正常访问了~ 如果yourname.github.io已经可以正常访问了,那么Github一侧的配置已经全部结束了。

到此搭建hexo博客的相关环境配置已经完成,下面开始讲解Hexo的相关配置

安装Hexo

在自己认为合适的地方创建一个文件夹,这里我以E:/hexo 为例子讲解,首先在E盘目录下创建Hexo文件夹,并在命令行的窗口进入到该目录

在命令行中输入:

npm install hexo-cli -g

然后你将会看到:

可能你会看到一个WARN,但是不用担心,这不会影响你的正常使用。 然后输入

npm install hexo --save

然后你会看到命令行窗口刷了一大堆白字,下面我们来看一看Hexo是不是已经安装好了。 在命令行中输入:

hexo -v

如果你看到了如图文字,则说明已经安装成功了。

hexo的相关配置初始化Hexo

接着上面的操作,输入:

hexo init

然后输入:

npm i

之后npm将会自动安装你需要的组件,只需要等待npm操作即可。

首次体验Hexo

继续操作,同样是在命令行中,输入:

hexo g


然后输入:

hexo s

然后会提示:
INFO Hexo is running at http://0.0.0.0:4000/ . Press Ctrl+C to stop.

在浏览器中打开http://localhost:4000/ ,你将会看到:

到目前为止,Hexo在本地的配置已经全都结束了。

下面会讲解怎样将Hexo与github page 联系起来

怎样将Hexo与github page 联系起来

大概分为以下几步

  • 配置git个人信息
  • 配置Deployment

    配置Git个人信息

    如果你之前已经配置好git个人信息,请跳过这一个 步骤,直接来到
  1. 设置Git的user name和email:(如果是第一次的话)
    	
    git config --global user.name "xujun"
    git config --global user.email "gdutxiaoxu@163.com"
  2. 生成密钥
    ssh-keygen -t rsa -C "gdutxiaoxu@163.com"

    配置Deployment

同样在_config.yml文件中,找到Deployment,然后按照如下修改:

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

比如我的仓库的地址是git@github.com:gdutxiaoxu/gdutxiaoxu.github.io.git,所以配置如下

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

写博客、发布文章

新建一篇博客,执行下面的命令:

hexo new post "article title"


这时候在我的 电脑的目录下 F:\hexo\source\ _posts 将会看到 article title.md 文件

用MarDown编辑器打开就可以编辑文章了。文章编辑好之后,运行生成、部署命令:

hexo g // 生成
hexo d // 部署

当然你也可以执行下面的命令,相当于上面两条命令的效果
hexo d -g #在部署前先生成

部署成功后访问 你的地址,https://yourName.github.io (这里输入我的地址: https://gdutxiao.github.io ),将可以看到生成的文章。

踩坑提醒

  1. 注意需要提前安装一个扩展:

    npm install hexo-deployer-git –save

    如果没有执行者行命令,将会提醒
    deloyer not found:git

  2. 如果出现下面这样的错误,

    Permission denied (publickey). 
    fatal: Could not read from remote repository.
    Please make sure you have the correct access rights
    and the repository exists.

    则是因为没有设置好public key所致。
    在本机生成public key,不懂的可以参考我的这一篇博客 Git ssh 配置及使用

转载: 手把手教你用Hexo+Github搭建属于自己的博客