Hexo+Github搭建个人博客(清晰版)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dj673344908/article/details/83446601

前言

技术更新快,需要去学习的东西很多。写写博客来帮助自己梳理、积累学习的点滴很有必要。是应该拥有一个自己的博客了,那就开始吧!

目前三种主流的搭建博客方式:

  • Git+Github+Markdown+hexo (免费)
  • Git+Github+Markdown+jekyll (免费)
  • 虚拟主机+插件+Wordpress (付费)

我选用了第一种方式(Git+Github+Markdown+hexo )来搭建,也希望能够把这个搭建的过程说的明白。

1.准备工作

1.1.简要说明

首先对我们搭建博客需要用到的工具进行一个简要的说明:

  • git : 将静态网页上传到github服务器需要用到的版本控制工具
  • node.js: hexo需要用到的运行环境
  • hexo :一个快速、简洁且高效的博客框架
  • Atom : Markdown文件编辑工具
  • 域名:简单说就是让人更方便的访问你博客/网站的一个名字

1.2.工作原理

既然我们已经知道需要准备些什么,并知道它们各自的用途,那下面用时序图来说明一篇博文从编写到通过域名访问博客的大致过程。

小明 Atom hexo node.js github 域名 小明用Atom编辑博文 把写好的博文放入安装了hexo框架文件夹 博文在node环境中运行,用浏览器可访问到本地的博文页面 使用git将本地博文推送到github服务器账户 将github服务器地址和小明的域名映射起来 小明在其他电脑上通过访问域名也可以看到自己的博客 小明 Atom hexo node.js github 域名

2.软件安装

2.1.git安装

.下载:直接在 git官网 下载就好。
.安装:可以一路默认安装,也可选择自己想要安装在哪个文件夹等。
.检验:在桌面点击鼠标右键,出现如下图标说明安装成功了:
1

2.2.node安装

.下载:直接在 node.js 官网 下载需要的版本就好。
.安装:可以一路默认安装,也可选择自己想要安装在哪个文件夹等。
.检验:按住 win+r 键,输入 cmd 进入命令行,输入node -v 出现如下图,说明安装成功了:
2

3.hexo安装与本地博客搭建

3.1.hexo安装

  • 在本地新建一个放置hexo源文件的文件夹(hexo),进入hexo文件夹,并鼠标右键点击Git Bash Here 进入安装,如下图:
    4

  • 输入命令 npm install -g hexo 安装hexo(但由于国内网络环境问题,使用该命令安装可能会遇到问题)。建议安装时指定下载源,修改命令如下:

     npm install -g cnpm --registry=https://registry.npm.taobao.org
    

5

  • 然后下载 hexo-cli (耐心等待):

     npm install -g hexo-cli
    

6
hexo负责管理工作,hexo-cli负责创建hexo 工程。参考:Hexo 与 Hexo-cli 的关系、入门教程

  • 检验:输入 hexo 命令,显示如下图表示安装成功:
    7

3.2.本地博客搭建

  • hexo初始化 : 在3.1节的基础上输入如下命令:

     hexo init
    

耐心等待,初始化如下图:
8
hexo文件夹下生成的文件及简要说明如下图:
9

  • 安装hexo插件,输入如下命令:

     cnpm install		// 注意:不是提示中的npm install
    

12
生成node_modules目录 :hexo的插件目录

  • 配置博客,用Atom编辑器(也可用其他编辑器)打开 _config.yml文件,简单配置如下图(后续可根据自己需要去丰富):
    10

  • 生成博客。输入以下命令,生成页面文件:

      hexo g		// hexo generate的简写
    
  • 启动服务。输入以下命令,启动本地服务:

      hexo s		// hexo server的简写
    

13

  • 检验:浏览器中输入 http://localhost:4000 ,出现如下页面表示本地博客搭建成功了:
    在这里插入图片描述

3.3.hexo卸载

为了方便大家复盘,特意加上卸载操作(我是复盘了好几次才对整个流程有一个比较好的理解)。
.输入如下命令:

  npm uninstall hexo

.然后删除hexo文件夹中的所有内容就OK了。

4.托管到github服务器

现在我们将本地博客托管到github服务器,实现远程访问。

4.1.注册github账号

为了节约篇幅,需要了解的小伙伴请移步 注册github账号

4.2.新建仓库

.如何新建仓库,请参考 创建GitHub仓库的步骤及方法

.需注意命名规则,说明如下如:
15

4.3.部署配置

hexo本地的配置文件_config.yml关联上刚才在github上新创建的仓库。

  • 在_config.yml最底部找到deploy配置,使用https,github账号加密码的方式来进行hexo的部署、配置如下:

      deploy:
      	 type: git
      	 repo: [email protected]:github账户名/github账户名.github.io.git
      	 branch: master
    
  • 例如:
    16

  • 安装git扩展插件:

      cnpm install hexo-deployer-git --save
      // 若没安装插件,在执行hexo d命令时,可能报错:deloyer not found:git
      // 使用npm install hexo-deployer-git --save也可能报上述错误
    
  • 博客上传,依次执行以下命令:

      hexo clean		// 清除缓存
      hexo g 			// hexo generate的简写,生成静态网页
      hexo d            // hexo deploy的简写,发布博客
      // 新建博客都需要执行这三步	
    

18

  • 检验:浏览器中输入 abcartist.github.io 显示如下页面表示博客发布至github服务器成功了
    19

对github不是很熟悉的小伙伴,可以先看一下这个号称 史上最简单的Github教程【偷笑】

5.域名绑定

输入githubname.github.io访问博客,会不会显得有些不够档次啊,绑定一个自己的域名吧!

5.1.购买域名

域名供应商有很多,我选了 阿里的万网,可以直接使用支付宝授权登录,然后实名,再购买域名(购买后需过几个小时才能生效,有短信通知):
20

5.2.设置域名解析:

  • 进入云解析列表,点击 【解析设置】置 如下图:
    21

  • 可以跟着【新手引导】去添加记录、进行设置,如下图:
    23

  • 【添加记录】解析地址如下图:
    24

  • github服务器两个IP地址:192.30.252.153和192.30.252.154
    .A记录类型对应服务器的IP,CNAME记录类型对应github博客网址,如上图中的解析列表。

  • 创建CNAME文件
    全部解析设置完成后,此时并不能通过域名访问到博客。需要在hexo根目录的source文件夹里创建CNAME文件(不带任何后缀),编辑该文件并添加你的域名信息,如:name.com。具体如下图:
    25
    CNAME文件中我配的是 www.steventing.cn
    如果配的是 www.steventing.cn,在浏览器显示的就是www.steventing.cn,不论输入的是www.steventing.cn还是steventing.cn
    如果配的是 steventing.cn,同理在浏览器显示的就是steventing.cn

  • 域名关联GitHub Pages,在github中找到 abcartist.github.io 进入Setting,设置如下图:
    28
    27

  • 检验:浏览器中输入 www.steventing.cn 显示如下页面表示域名绑定成功了
    26

小结

以上就是Hexo+GithubPage搭建个人博客的大致过程,大家可以根据这个流程去搭建、复盘、理解,也欢迎下方留言【嘻嘻】。

猜你喜欢

转载自blog.csdn.net/dj673344908/article/details/83446601