阿泳在快乐星球
0%

初次建站

发表于 更新于 阅读次数： 14

github+hexo搭建个人博客

特别感谢知乎大佬枫叶的从零开始搭建个人博客，他的文章非常详尽的介绍了如何通过使用 github+hexo搭建个人博客。
下面是我按照他的流程搭建博客的步骤，持续更新遇到的问题和使用的技术（或许）：

注册github（略过）

安装git（略过）

绑定github+git

在本地创建文件

在本地创建文件后它并没有添加进本地仓库中，需要使用git add添加进缓冲区，然后使用git commit提交进本地仓库，之后如果想推送远程仓库的话需要使用gitpush

实现本地仓库和远程仓库的使用

git clone 将远程仓库内容clone到本地

git status 查看本地仓库状态

git add 添加文件进入缓冲区

git commit -m 提交进本地仓库

1
2
$ git config --global user.name"*******"
$ git config --global user.email"***@***.com"

git log 查看提交日志

git push origin 【分支名】 推送到远程

image-20230723185752952

报错fatal: unable to access https://github解决办法

方法一：修改host文件

把140.82.114.4 github.com添加到C:\Windows\System32\drivers\etc里的hosts文件的最后一行，然后保存就行

方法二：把命令行里的http改为git重新执行

image-20230726131312455

域名购买

阿里云或者GoDaddy

安装node.js和Hexo

node.js

https://nodejs.org/en

image-20230724165200876

nodejs安装验证

image-20230724165308446

nodejs设置全局模块的路径和环境变量

不设置的话安装模块会将其安装到C盘，占用C盘的空间，并且可能安装好hexo后无法使用

在 nodejs 文件夹中新建两个空文件夹 node_cache、node_global，如下图：

image-20230726113009017

打开cmd 输入

1
2
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

image-20230724165624160

nodejs设置环境变量

设置环境变量：win10系统 –> 打开控制面板 –> 系统 –>高级系统设置 –> 环境变量 ，然后在系统变量中新建一个变量名为“NODE_PATH”，值为“D:\Program Files\nodejs\node_global\node_modules”（取决于你的安装路径），如下图：image-20230724165845181

然后编辑用户变量里的Path，将相应npm的路径改为：D:\Program Files\nodejs\node_global，如下图：

image-20230724165937838

nodejs测试

在 cmd 命令下执行 npm install webpack -g ：

image-20230726113037263

（如果遇到报错，显示创建文件夹失败，请尝试使用管理员运行命令行）

安装HEXO

创建仓库

安装HEXO

首先在D盘建立一个文件夹 Blog，点开 Blog 文件夹，鼠标右键打开 Git Bush Here，输入npm命令安装Hexo：

1
npm install -g hexo-cli

（如果遇到报错，请用管理员运行git bush）

安装完成后，输入 hexo init 命令初始化博客：

image-20230726103203665

之后输入hexo g进入静态部署

image-20230726103220785

这时网页已经部署完成，输入 hexo s 命令可以查看：

image-20230726103234507

浏览器输入 http://localhost:4000就可以打开新部署的网页：

看完之后 ctrl +c 停止运行服务器。

将HEXO部署到github上

现在回到我们的 Blog 文件夹，用笔记本打开 _config.yml 文件，如下图：

下滑到文件底部，填上如下内容：

1
2
3
4
deploy:
  type: git
  repository: https://github.com/********/********.github.io.git #你的仓库地址
  branch: main

image-20230726113143738

然后回到 Blog 文件夹中，打开 Git Bash，安装Git部署插件，输入命令：

1
npm install hexo-deployer-git --save

image-20230726103607548

然后分别输入以下三条命令：

1
2
3
hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

（写入github必须用直连而不能用vpn）

完成以后，打开浏览器，输入 https://【你的仓库地址后段】.github.io/就可以打开你的网页了：

解析域名

第一步：登录万网，点击控制台，在你已购买的域名后添加两条解析记录：

image-20230726113240181

第二步：打开 Blog 文件夹里的 source 文件夹，添加CNAME文件，可以先创建一个CNAME.txt文件，打开后写上你的域名，不要加www否则每次访问都必须加www，但如果不带有www，以后访问的时候带不带www都可以访问，保存后记得要重命名，将.txt删除，如下图：

image-20230726104943411

第三步回到 Blog 文件夹，右键打开 Git Bash，依次输入下面三条命令：

1
2
3
hexo clean
hexo g
hexo d

打开GitHub，看看CNAME文件是否已经在你的项目中，点击 settings ：

image-20230726105155079

美化

更换主题

打开博客根目录Blog文件夹，右键Git Bash，输入如下代码将next主题下载到目录Blog/themes：

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

image-20230726105411531

打开根目录下的_config.yml(称为站点配置文件)，修改主题（注意冒号后都要有空格）：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Site
title: 阿泳在快乐星球   #标题
subtitle: ''
description: 有意思比有意义本身更有意义      #简介
keywords:
author: kimyong     #作者
language: zh-CN     #语言，zh-CN还是zh-Hans取决于你的themes/next/language下的简体中文是什么
timezone: Asia/Shanghai    #中国的时区

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next   #主题改为next

选择不同的主题

Blog/themes/next/下的_config.yml（称为主题配置文件），只要将你选的主题前的#删除就行了：

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini    #这是我选的主题

回到根目录打开Git Bash，输入如下三条命令：

1
2
3
hexo clean
hexo g
hexo d

（问题：改主题为Gemini时，hexo clean，hexo g，hexo d 三个命令完成后主题未改变；解决办法：删除next下的.git文件夹（这好像是个隐藏文件夹），再上传时修改成功。）

解决hexo无法显示图片的问题

更改hexo的配置文件

配置根目录：_config.yml里面的post_asset_folder:false 设置为 true

这样之后使用hexo创建新的post会产生一个同名的文件夹才存放图片

更改markdown设置（Typora）

如果你使用Typora进行md文件的编写的话，他的图片默认是放在文件相同目录下的，因此需要修改偏好设置如图：

image-20230726140622753

它会将图片放到文件同级同名的文件夹中，第一个对勾表示本地的图片会被复制过去，第二个对勾表示如果是网络的图片会被复制过去，第三个对勾（必须要打）因为它会将md中的图片文件的引用改成！[图片](图片的相对地址)的形式。只有这样hexo的图片插件才能构建正确的url。（本人在这个地方踩过好久的坑，搜了几个小时结果发现是这里的问题）

方法一：修改hexo-asset-image插件

下载插件

  • 进入你博客的根目录，右键单击, 然后选择 git bash here 打开 git bash.
  • 键入命令 npm install hexo-asset-image --save （吐槽一下，网上有的抄的教程里面，插件名都打不对…）

修改插件

exo的更新导致一些路径产生了变化，因此无法显示图片的原因大概率是因为图片的地址有问题，可以通过hexo s进入localhost:4000右键图片来查看图片的地址是否有问题

不废话，步骤：

  • 进入你博客的根目录，然后下面顺序找到index.js:
    node_modules –> hexo-asset-image –> index.js
  • 用VS Code 或者 记事本打开 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.md".
        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-asset-image插件

直接将方法一的下载命令改成

npm install https://github.com/CodeFalling/hexo-asset-image --save

应用

1
2
3
hexo clean
hexo g
hexo d