SniperCoding的个人博客

记录成长点滴

0%

Hexo+GitHub搭建个人博客

发表于 分类于 评论数：
本文字数： 3.3k 阅读时长 ≈ 3 分钟

0. 初衷

将所学知识点记录在博客上是一个很好的习惯。一方面，可以加深自己对技术点的理解，同时方便以后复习回顾；另一方面，可以将自己的见解分享出去，帮助更多的人，更好的发挥开源精神。

目前存在许许多多的博客平台，但是很多平台都比较乱，甚至有很多广告，而且有些博客平台也不支持自定义样式。

如果想要有一个只属于自己的博客，并且页面可以自定义为所喜欢的样式，同时还可以免费白嫖，那该多好 啊！而 GitHub + Hexo 就可以实现这些！

1. 前置环境

使用 GitHub + Hexo 搭建环境之前，需要提前做以下准备：

  • 注册 GitHub 账号，官网：https://github.com/

  • 安装 Git，官网：https://git-scm.com/downloads

    安装较为简单，基本流程：下载安装包—->双击安装包后一路 Next—>cmd 窗口使用 git –version 验证安装是否成功，之后需要做一些初始化设置，比如用户名和邮箱，并于自己的GitHub进行关联，Git学习教程可见https://www.runoob.com/git/git-tutorial.html

  • 安装 Node.js，官网：https://nodejs.org/en/

    安装较为简单，基本流程：下载安装包—->双击安装包后一路 Next —> cmd 窗口分别输入 node -v 和 npm -v 验证安装是否成功。

2. 安装 Hexo

  • 打开 cmd 命令行窗口，输入命令：npm install -g hexo-cli 进行安装。

  • 输入 hexo -v，出现版本号，即安装成功！

3. 本地部署 Hexo

安装完Hexo后，接下来在本地进行部署，部署完成后，Hexo服务器会运行在本地的4000端口上，当我们输入http://localhost:4000/ 时就可以在浏览器中看到自己的博客网站了！具体步骤如下：

  • 在任意地方（比如在D盘）新建一个文件夹 Blog（以后发布的文章、主题均在此文件夹中，也可以自定义为其他名称），进入文件夹，在空白处点击右键，选择 Git Bash Here

  • 在Git Bash中输入hexo init，初始化 hexo 博客（此时会去 GitHub 中克隆 hexo-starter）

  • 初始化完成后，Blog 文件夹中会多出一些文件

  • 在 Git Bash 中输入hexo g，生成静态文件（也可以使用全命令 hexo generate）

  • 在 Git Bash 中输入hexo s，启动 hexo 服务器（也可以使用全命令 hexo server）

  • 启动 hexo 服务器后，在浏览器输入网址：http://localhost:4000/，出现以下界面，即表明本地 hexo 部署成功！

4. 远程部署（GitHub）Hexo

以上我们将 Hexo 部署到了本地，但是存在一个问题，此时仅自己或者是局域网内的小伙伴可以看到此博客网站，其他人并不能在网络上进行访问，为了让所有人都可以访问我们的博客网站，可以借助于 GitHub 实现远程部署。下面是远程部署流程：

  • 在 GitHub 上新建一个仓库，仓库名必须为：你的用户名.github.io，比如我的叫：SniperCoding.github.io

  • 点击Create repository创建仓库后，复制仓库地址

  • 打开 Blog 文件夹中的 _config.yml 文件，将最下面内容修改如下（其中 repository 填写刚才复制的地址）：

    1
    2
    3
    4
    5
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
      type: git
      repository: https://github.com/你的用户名/你的用户名.github.io.git

  • 在 Git Bash 中使用 Ctrl+C 退出刚才的本地部署，然后输入命令 npm install --save hexo-deployer-git安装 Git 部署插件

  • 接着依次键入

    • hexo clean (清除缓存文件 (db.json) 和已生成的静态文件 (public)。)
    • hexo g（hexo generate，生成静态文件）
    • hexo d（hexo deploy，部署网站到配置文件中指定的仓库，此步需要输入 GitHub 账号密码）

  • 在浏览器打开 https://你的用户名.github.io/（比如我的是 https://snipercoding.github.io/），出现以下界面，即表明 Hexo 远程部署成功！

5. Hexo目录结构

文件/文件夹 作用
node_modules 存放已安装的各类依赖包
public 当执行Hexo g命令后会生成此文件夹，实际上会将source文件夹里的Markdown文档，使用当前主题将其转换成HTML文件，我们在博客中看到的就是此页面。（使用 hexo clean会 清除 db.json 和 public 文件夹下的所有文件。）
scaffolds 模版 文件夹。当新建文章时，Hexo 会根据 scaffold 来建立文件。包含 page，post，draft三种模板，分别对应 页面、要发布的文章、草稿。
source 用户资源文件夹。 其下_posts 文件夹用来存放图片、Markdown 文章等，通过Hexo g命令将文章解析为HTML文件放到public文件夹中
themes 主题文件夹。每个主题都会有一个单独文件夹。其默认主题为landscape。
_config.yml 全局配置文件。可设置包括网站标题、副标题、作者、关键字和描述信息、主题等
.deploy_git 当执行hexo d远程部署时会生成此文件夹，实际上会将public文件夹的内容提交到Github后中，内容与public文件夹基本一致（不一致的情况是由于重新生成，但是没有发布站点造成，此时 public 内容新于 .deploy_gi 内容）。

6. Hexo发布文章

在 Git Bash 中输入hexo new "文章标题"，会在 /source/_posts/ 文件夹中生成文章标题.md文件

打开文章标题.md文件，然后编写文章内容（遵循Markdown语法规范）

之后在 Git Bash 依次键入以下命令远程部署：

  • hexo clean (清除缓存文件 (db.json) 和已生成的静态文件 (public)。)
  • hexo g（hexo generate，生成静态文件）
  • hexo d（hexo deploy，部署网站到配置文件中指定的仓库，此步需要输入github账号密码）

打开 GitHub网址，即可看到自己新发布的文章.

注意：文章中使用图片较为特殊，建议大家利用充分利用 GitHub, 将其作为图床，将本地图片转化为url链接，然后在文章中使用，详情可见：GitHub+JSDelivr+PicGo+Typora搭建个人图床

也可以使用下面方式配置图片路径（配置一次就好）：

  • 打开 **_config.yml **配置文件，将 post_asset_folder 的值修改为 true

  • 在 Git Bash 中输入命令npm install hexo-asset-image --save安装插件

  • 修改 node_modules\hexo-asset-image\index.js 内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    'use strict';
    var cheerio = require('cheerio');

    // http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
    function getPosition(str, m, i) {
      return str.split(m, i).join(m).length;
    }

    var version = String(hexo.version).split('.');
    hexo.extend.filter.register('after_post_render', function(data){
      var config = hexo.config;
      if(config.post_asset_folder){
        	var link = data.permalink;
    	if(version.length > 0 && Number(version[0]) == 3)
    	   var beginPos = getPosition(link, '/', 1) + 1;
    	else
    	   var beginPos = getPosition(link, '/', 3) + 1;
    	// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    	var endPos = link.lastIndexOf('/') + 1;
        link = link.substring(beginPos, endPos);

        var toprocess = ['excerpt', 'more', 'content'];
        for(var i = 0; i < toprocess.length; i++){
          var key = toprocess[i];
     
          var $ = cheerio.load(data[key], {
            ignoreWhitespace: false,
            xmlMode: false,
            lowerCaseTags: false,
            decodeEntities: false
          });

          $('img').each(function(){
    		if ($(this).attr('src')){
    			// For windows style path, we replace '\' to '/'.
    			var src = $(this).attr('src').replace('\\', '/');
    			if(!/http[s]*.*|\/\/.*/.test(src) &&
    			   !/^\s*\//.test(src)) {
    			  // For "about" page, the first part of "src" can't be removed.
    			  // In addition, to support multi-level local directory.
    			  var linkArray = link.split('/').filter(function(elem){
    				return elem != '';
    			  });
    			  var srcArray = src.split('/').filter(function(elem){
    				return elem != '' && elem != '.';
    			  });
    			  if(srcArray.length > 1)
    				srcArray.shift();
    			  src = srcArray.join('/');
    			  $(this).attr('src', config.root + link + src);
    			  console.info&&console.info("update link as:-->"+config.root + link + src);
    			}
    		}else{
    			console.info&&console.info("no src attr, skipped...");
    			console.info&&console.info($(this));
    		}
          });
          data[key] = $.html();
        }
      }
    });

  • 配置完图片路径后，以后在使用 hexo new "文章标题"命令后，会在 /source/_post 下生成文章标题.md文件和文章标题文件夹，将所需要的图片放入到标题文件夹中。在文章中可以使用相对路径引用图片资源![](图片相对路径)

    比如使用 hexo new “test_article” 创建一篇文章，会在 /source/_post 生成 test_article.md 文件和 test_article文件夹，然后将 test.jpg 放入 test_article 文件夹中，在文章中只需要使用![](test_article/test.jpg)即可。

7. Hexo配置站点信息

打开 _config.yml 文件，按自己需求修改以下内容

1
2
3
4
5
6
7
8
# Site
title: SniperCoding的个人博客		 			  # 网站标题
subtitle: ''		  						      # 网站副标题
description: '请不要假装很努力，因为结果不会陪你演戏'  # 网站描述（一般为格言）
keywords:
author: SniperCoding					   		  # 网站作者
language: zh-CN									  # 网站语言
timezone: 'Asia/Shanghai'						  # 网站时区

注意_config.yml 文件的编码格式应为 utf-8，否则会出现中文乱码。

以上就是使用 GitHub + Hexo 搭建简易个人博客的流程，但是博客默认主题样式不够美观，如果想要自定义博客样式的话，可以自行更换主题，下期我将向大家介绍，如何将Hexo的主题更换为next主题，并对自己的个人博客增加各种功能，比如添加背景、进度条、评论、文章目录等等。

-------本 文 结 束 感 谢 您 的 阅 读-------