使用Hexo&GitHub免费快速搭建博客教程

通过两天的折腾，终于搞定了属于本身的第一个博客的搭建，在此期间踩了许多坑，现总结一下帮助各位可以更方便去搭建本身的博客。先贴上成果 拾忆的博客

百度参考了各路大神的博客文章最后进行的总结，望各路大神不要介意哦~

由于本人长期使用mac电脑，故本篇文章只在mac系统的基础上去实现功能，使用Windows系统须要自行参考，其原理是同样的。

这是本人写的第一篇文章，可能会看到和其余的许多文章有类似之处，请你们自动忽略(￣▽￣)~* ，全文纯手打，旨在帮助你们更方便的实现搭建过程，你们不喜勿喷哦~

1、引子

1.搭建博客的缘由

• 曾经用过印象笔记，有道笔记等工具来记录文章，但用起来老是感受有或多或少的问题，不如用博客看的更直观
• 能够随心发表，改造外观，功能
• 拥有一个本身的博客网站，感受更爽
• 但愿更多的人能够看到本身写的文章

2.整个过程使用的时间

• 最开始百度参考了各路大神的文章，每篇文章都会有或多或少的缺陷，本身又踩了许多坑才完成
• 用了大概两天的时间，完成了博客的搭建和主题的修改

3.环境配置

• mac系统，sublime编辑器 （暂时使用到的）
• github帐号，hexo框架配置，next主题 （下面会提供配置方式）

4.搭建方式

• 使用hexo框架进行网站的构建，而后部署到免费的github上

2、GitHub配置

1. 登录 github.com/ ，没有帐号的就去注册一个，记住本身的用户名

2. 主页中点击右上角本身的图标，点击your profile

   

3. 点击repositories，新建一个

   

4. Repository name （填本身的名字） http://yourname.github.io(yourname与你的注册用户名一致,这个就是你博客的域名了),下图中报错是由于我已经用过了这个名字，你们填写本身的名字不会遇到这个问题，而后点击create repository进行下一步

   

5. 点击本身的这个repository，而后找到settings

   

6. 下拉找到GitHub Pages, 其中上面红框中的即为你的博客地址，下面红色框中能够进去选择本身的主题样式, 此时github中的基本配置已经完成

   

   如第一次进入，可能会不显示博客地址，以下图，则能够先选择github自带的主题样式，Choose a theme 按钮，再回来后就可以看到了(注意：在save按钮左边那项要显示为master branch才表示正确)

   

3、环境配置

1. 安装 Node.js 安装完成后终端输入

   node -v

   npm -v

   查看版本号，如存在则代表配置成功

2. mac系统自带Git环境，Windows用户须要自行下载Git

3. 安装完成后，经过git命令查看本身的用户名和邮箱是否和本身github中的一致，如不一致请自行更改，如查询到多个用户名须删除没用的用户名，如查询后没有任何反应则代表尚未配置用户名，用下面的修改或者添加用户名命令便可，如提示其余之类的可先执行命令 git config，而后再执行如下命令便可成功,附查看和更改命令（其余命令可自行百度查找）：

   查看用户名： git config --global user.name

   查看邮箱： git config --global user.email

   删除用户名 git config --global --unset user.name 要删的用户名

   增长用户名 git config —global —add user.name 新加的用户名

   修改用户名 git config --global user.name 用户名

   修改邮箱 git config --global user.email 邮箱

4. 终端中输入 npm install -g hexo-cli(如提示无权限即下图红色框中permission denied，则输入sudo npm install -g hexo-cli,后输入电脑密码enter便可)

   

5. 这个过程会比较久，若是出现WARN错误能够忽略。我记得当时，每次都会出现说有一个依赖包已经不更新，这个不影响。执行完成后，使用 hexo -v 查看是否安装成功，以下图所示，即代表已经成功安装上

   

4、网站代码以及设置

1. 在桌面上建立一个文件夹，名字自定义如：hexo,终端cd 进入hexo文件夹

2. 输入hexo init blog (如出现warn错误可忽略，不影响)

   • _config.yml, 网站的配置信息，能够在此配置中配置大部分的参数
   • source，资源文件夹是存放用户资源的地方。除 posts 文件夹以外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其余文件会被拷贝过去
   • themes，主题 文件夹。Hexo 会根据主题来生成静态页面。

3. 等待提示Start blogging with Hexo，就是安装成功了

4. 文件夹中自带一篇文章“Hello World”

5. 命令行cd进入blog目录下

6. 输入hexo g，生存静态文件

7. 输入hexo s，启动服务器。默认状况下，访问网址为： http://localhost:4000/ 此时服务开启，如需关闭Ctrl+ C

   注：hexo s 命令开启的是本地服务，开启后，则可使用上述地址访问，如关闭，则上述地址访问不到，本功能旨在用来检查修改的配置是否成功，如打开查看后发现没有问题则能够部署到服务器上，以后再用你的博客地址访问便可看到最新的设置效果。

   如上传服务器以后当即查看博客可能没有当即变化，可尝试多刷新几回或从新打开浏览器便可

8. 新打开一个终端，输入：ssh-keygen -t rsa -C "Github的注册邮箱地址"

   一路enter过来，中间有的问题是选y/n的，选y便可，最后获得信息中找到这句话： Your public key has been saved in /Users/zjjk/.ssh/id_rsa.pub.

   找到该文件(上句中in 后面即为该文件的地址)，打开（使用sublime text或其余编辑器）,Ctrl + a复制里面的全部内容，而后进入Sign in to GitHub：github.com/settings/ss…

   一步步操做：New SSH key ——Title：blog —— Key：输入刚才复制的—— Add SSH key

   注：此过程是生成ssh key，如后续再次执行此命令时，则须要把新生成的SSH key再配置到github中，由于新生成的SSH key会覆盖以前的，如不去github中替换会致使后续上传git服务器过程当中失败

5、博客网站配置信息

1. 进入blog文件夹，用sublime打开_config.yml文件，此文件为博客的配置信息，在此修改参数。（特别注意：每一个参数的后面都要加个空格）

2. 按照本身的信息进行基础设置

   title: 拾忆的博客

   subtitle: 小白的技术成长之路

   description: 小白的技术成长之路

   author: 拾忆

   language: zh-CN

   timezone: Asia/Shanghai

3. 在_config.yml文件中找到 deploy配置处（通常在最下面，默认的显示可能不全，需按照下方示例本身添加）, username替换成你本身的username, repository的地址为你在github中建立的那个项目的地址，可去github中复制

   

   deploy: 
   
    	type: git
   
    	repository: git@github.com:username/username.github.io.git
   
    	branch: master
   复制代码

   保存完毕。

4. 各种主题的配置信息，要在主题文件夹内的_config.yml上进行配置！后续会以next主题为例进行示范，此处可忽略。

6、发表文章

1. 终端 cd 进入blog文件夹下，输入hexo new "Hello blog"(Hello blog为你的文章名，可自定义)

2. 打开返回的文件地址，打开文件（也可在blog文件夹下 source/_posts/Hello blog.md 中找到你刚才建立的文件）

3. 文章内容采用Markdown语法进行编辑，须要用相关软件才能打开这个文件，本人使用的软件为MacDown mac版, 你们可根据本身习惯下载喜欢的工具(附：Markdown语法使用说明)

4. 打开文件编辑

   ---
    title: Hello blog
   
    date: 
   
    ---
   复制代码

   只输入title字段便可，后续其余字段可根据主题再添加（注意：title后面需加空格）

5. 打开终端执行如下步骤:

   cd 进入blog 文件夹
    
    $ hexo clean
    INFO  Deleted database.
    INFO  Deleted public folder.
    
    $ hexo generate
    INFO  Start processing
    INFO  Files loaded in 1.48 s
    ...
    INFO  29 files generated in 4.27 s
    
    $ hexo server
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
   复制代码

   此处三步是进行本地配置完成后，在本地打开查看刚刚修改的配置是否修改为功，三处命令也可这样写 hexo clean hexo g hexo s

6. 打开 http://localhost:4000/后检查，如没有任何问题能够部署到服务器上

   $ hexo deploy
    INFO  Deploying: git
   复制代码

   此时可能会出现 error deployer not found:git 的错误，输入如下代码

   npm install hexo-deployer-git --save(如提示无权限错误则输入sudo npm install hexo-deployer-git –-save，后输入电脑密码enter便可)

   再次执行 hexo deploy

   其中，可能会出现github登陆界面，正常填写就行(这里我一直登录着github，暂时没有遇到)

   完成，终端可Ctrl+C关闭本地服务，而后打开 username.github.io 便可访问本身的博客（username为本身的github的用户名）

7、主题设置

主题设置中，最好玩的就是尝试各式各样的主题啦！因本人喜欢next主题的风格，因此会在下篇文章中以next主题为例，走一遍发布文章和配置博客各类信息的流程，下面是其余的一些主题，你们可根据本身喜欢的样式去选择主题下载配置，通常的主题配置都会在其相应的github中说明

官方hexo主题大全，里面有许多主题都能尝试一下。

在这里推荐几个主题：

• next官网,Git(我用的就是这个啦，十分推荐！）
• Material官网，Git

  1. 主题配置，首先要下载主题，到相应的Git连接

  2. 下载完之后将文件解压缩后放到blog中的themes文件夹中

  3. 修改主题文件夹名称，将其改成 next(名称为你的主题的名称，可自定义，无硬性要求，下以next为例) 。 而后打开配置文件（/blog/_config.yml），找到 theme 字段，并将其值更改成 next(你刚才自定义的名称, 注意theme后加空格)，保存关闭

     

  4. 接下来，打开主题相应的博客中的文档说明，对比“主题”中的_config.yml（ /blog/themes/next/_config.yml ），针对本身须要的功能进行相关设置

  5. 有关设置中的图片，统一放到主题文件夹(/next/)内\source\img。在设置中，用”/img/xigua.png”相似格式进行图片设置。

  6. 设置时切记 : 后面要加一个空格。这个坑有点恼人~

  7. 最后再从新进行一次，hexo clean,hexo g,hexo s,hexo deploy 整个博客就完成主题修改啦

8、总结

• 用了两天的时间，完成的博客的搭建，又花了一天时间来编写此篇文章，全文纯手打，写到这里真的好累啊~

• 看着别人的文章一路搭建下来中间仍是会遇到不少问题，因而各类百度解决，故在此奉上此文，我遇到的坑这里都明确的解决了，你们也同样，可能会遇到各类不一样的问题，百度去一个一个的解决就行了（万能的百度啊~~~）

• 编写文章用了一遍Markdown的语法，感受还能够

• 拾忆的博客

• 后续会陆续编写更多的文章，欢迎你们订阅哦~