抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

你好呀!这里是默元。我将为您介绍如何使用Hexo和Github来方便快捷地搭建自己的博客页面。
真的非常抱歉!我使用的图床在国内环境下访问速度极慢,可能您自己探索配好以后回到网站才发现我有放详细的过程图!

Hexo简要介绍(以及杂谈)

Hexo是一个快速、简洁且高效的静态博客框架,搭配Github可以让您快速完成自己的静态博客搭建,十分简明友好。Hexo提供极丰富的主题风格与功能模块,对于新手来说也能快速拥有很好的效果。

Hexo使用的是Markdown语法。你可以在这里学习Markdown语法。

Hexo使用的是Markdown语法,但使用HTML来书写你的博客也是可以的。虽然这样会复杂一些……我也只是顺口一提。如果想学习HTML,我个人推荐w3school

让我们开始吧!

以下我所说的全部内容,你也可以在Hexo官方文档中找到。

一、前置准备

为了使用Hexo,你需要下载Node.JSgit

Node.js官网十分简洁明了:Node.js官网截图左为“推荐给大多数用户的版本”,也就是通俗意义上的“稳定版”,右为最新版。选择哪个无所谓。你可以更改安装目录,接下来一直点击next即可。

将光标置于开始菜单徽标上,右键选择终端。

第一次选择终端(管理员)时可能报错找不到程序,先以普通权限打开终端即可自动解决。输入node -vnpm -v来查看版本,若成功显示则安装完成。
屏幕截图 2023-07-23 165843.png

注:npm是Node的开放式模块登记和管理系统,是Node.js包的标准发布平台,用于Node.js包的发布、传播、依赖控制,npm在安装Node.js时会连带被安装。如果你仔细查看安装步骤过程的英文,应该对其有所印象。

npm全局下载的东西默认存在C盘,如果你对此不满意,可以进行如下操作。

使用npm get prefix查看npm全局模块的存放路径;使用npm get cache查看npm缓存默认存放路径。你应该会看到两个C盘路径。在自己安装Node.js的路径中新建node_cache、node_global文件夹(名字不要更改),在node_global文件夹中再新建node_modules文件夹。下图以E盘安装Node.js为例,图一中node_modules文件夹是本来就有的,不要动。
图一
图二
在终端执行以下命令来设置全局模块的安装路径到 “node_global” 文件夹,
npm config set prefix "刚刚建的node_global文件夹地址"
在终端执行以下命令来设置缓存到 “node_cache” 文件夹
npm config set cache "刚刚建的node_cache文件夹地址"
Tips:不会写文件夹地址的同学,可以在文件资源管理器中打开那个文件夹,然后单击上方路径,CTRL+C复制即可。
屏幕截图 2023-07-23 152318.png

由于 node 全局模块大多数都是可以通过命令行访问的,还要把[node_global]的路径加入到系统变量中,方便直接使用命令行运行.

现在大家基本都用win10及更高系统,最简单的打开环境变量的方法是在搜索中直接搜索“环境”或“高级”,点击对应选项,点击“环境变量”。
搜索环境变量

搜索高级系统配置

点击环境变量
可以看到环境变量分为用户变量和系统变量。用户变量只针对当前电脑登录的用户有效,而系统变量对所有使用这台电脑的用户有效。更多区别可以点我了解
双击系统变量(下边那堆)中的PATH,对最下面空白的一个格子双击(或点击新建),写入刚刚创建的node_global文件夹对应路径。然后点击确定。

最后对刚刚新建的三个文件夹进行如下操作:右键-属性-安全-编辑-勾选完全控制。这样才能确保使用npm时有权限写入文件夹。
屏幕截图 2023-07-23 153525.png
屏幕截图 2023-07-23 153553.png

接下来我们安装Git吧!

Git安装会自动添加到环境变量,因此省心不少,唯独安装过程中大量的选择和英文比较麻烦。这位作者的翻译非常好,大家可以看看。如果不关心安装过程中的具体内容,也可以(除更换安装路径外)全部选择默认(下一步)。

我们还需要一个强大的文件编辑软件。很多文件,我们虽然可以用记事本(Notepad)打开,却无法编辑。我使用Notepad–打开并编辑。

找到下载界面,选择Notepad–v2.6.0-win10-single-portable.zip下载。解压缩至合适位置。

安装Hexo

使用 npm 安装 Hexo。在终端输入npm install -g hexo-cli,回车并稍后。依旧用hexo -v查看一下版本确认安装成功。
新建一个文件夹,任意名字都行,它将会是你博客所有内容存储的地方,比如我在D盘新建一个文件夹blog_byHexo。然后右键-更多,选择Git bash here。
屏幕截图 2023-07-20 220454.png

在Git bash中,不可以使用CTRL+C/V来复制粘贴。你可以右键选择copy和paste。

输入hexo init,回车。结束后你将发现文件夹中多了许多东西,这就是初始化的内容。
输入hexo g,回车稍候,生成静态文件。输入hexo s,回车稍候,开启本地预览服务。
这时,在浏览器访问http://localhost:4000/就可以查看你的初始博客页面了。博客页面的美化与各种功能模块的添加可以自行探索。

此时我们的博客页面只能在本地访问,接下来我们将通过Github将其部署至互联网上。

Github上要做的事情

确保你有一个Github账号。注册时如果一个邮箱注册不上,换一个邮箱。我当时QQ邮箱无法注册,使用学校邮箱注册的,但是有人QQ邮箱就能注册上。

顺便介绍一下这个地方:点击右上角自己的头像,选择Your profile,
屏幕截图 2023-07-23 161010.png
下面这些格子,每个格子代表一天,颜色越绿,表示你在这一天向Github上传的代码数量越多(GitHub是世界上最大的代码托管平台)。
屏幕截图 2023-07-23 161503.png
如果你的大学生涯中这些格子全是绿的,面试时给考官一看,相信考官一定会对你惊为天人,青睐有加。
R.png

说回正题,在自己的个人主页,新建一个仓库。注意记住仓库这个词。
屏幕截图 2023-07-23 160941.png
Repository name一定要填写[自己的github账户名].github.io(没有中括号)。剩下的可以不动。确保一定是public!

对博客文件夹右键-Git bash here(翻译:在此文件夹路径中打开git bash),输入git config --global user.name "你的github用户名",git config --global user.email "你的github注册邮箱"
接下来ssh-keygen -t rsa -C "你的github注册邮箱",生成ssh密钥文件。有提示按提示输入yes,无提示按回车。

这样会生成id_rsa和id_rsa.pub两个文件(在C:\Users\你的电脑用户名.ssh)。接着用记事本或Notepad–打开id_rsa.pub 密钥,将全部内容复制(CTRL+A,CTRL+C)。
注:使用Notepad–打开的方式:1.右键-打开方式-选择其他应用-在电脑上选择应用-找到你安装Notepad–的位置,点击Notepad–。 2.或者先打开Notepad–,再将文件拖入Notepad–窗口中。

接下来回到Github,点击右上角头像,选择settings,选择SSH and GPG keys那一项,点击new SSH Key.title为你key的名称,任意填写。将刚刚复制的内容全部粘贴在下方Key输入框中。
屏幕截图 2023-07-23 163650.png

开始部署

在你的博客文件夹中找到站点配置文件_config.yml,将最后一段更改为

deploy:
    type: git
    repo: https://github.com/ChangAkira/ChangAkira.github.io.git(你Github上建好的的仓库地址)
    branch: master

到这里就全部结束啦!

git bash中,依次执行hexo clean,hexo g,hexo d。等待一会儿(延迟)后,你就可以在”Github用户名.github.io”网站看到自己的博客了。

后记

终于将建站步骤大致梳理清晰了。

本文难免有各种疏漏之处,建站也经常会遇到各种诡异的现象,还请大家多多包含。

评论

评论区不是无人区喵