Windows下hexo+Github个人博客搭建

2021-09-24 博客搭建 hexo博客搭建评论字数统计: 1.6k(字) 阅读时长: 5(分)

前言

从本篇开始，开启博客搭建系列文章，介绍个人博客的搭建过程，希望能对您有所帮助

搭建过程参照了视频教程：卷二兔的个人空间_哔哩哔哩_bilibili

前期环境搭建

搭建博客所用到的一些软件的安装

项目常用工具

Markdown编辑器

博客搭建完成后，文章在md文档中撰写，因此有一个界面简洁、使用友好的Markdown的应用是有必要的，在这里推荐Typora

Typora — a markdown editor, markdown reader.

（2021/12/14更新：Typora更新至1.0版本以后开始收费，文末提供免费版Typora_V0.11.18安装包）

（2022/10/20更新：目前网上已经出现各种最新版破解方式，可以自行搜索下载）

代码编辑器

对博客的各种调试基本都是在设置相应的配置文件，因此有一个好用的代码编辑工具能够有效帮助到我们，可以使用以下几款工具

环境搭建准备

安装版本控制工具-Git

安装JavaScript 运行环境-NodeJs

NodeJs

😄NodeJs选择LTS版本

😄Git和Node的安装都可以无脑下一步，现在的安装都自动加到环境变量中，不需要再去单独设置

⭐安装完成后在CMD窗口使用命令git --version、node -v验证是否安装成功，显示应用版本号即为安装成功

包管理工具

npm（本项目使用）、cnpm、yarn

⭐npm会在安装Node时自动安装，只需要使用命令npm -v检查版本即可

Hexo博客框架搭建

hexo安装

在CMD窗口输入以下命令安装hexo

1 2	npm install hexo-cli -g -g 为global（全局），意为可以在任意目录下执行hexo

安装完成后使用命令hexo -v验证是否成功

出现hexo相关信息（如下图）即为安装成功

博客文件夹创建及设置

在电脑磁盘上选择位置创建一个文件夹（名字自拟，如 hexo/blog/myblog），用于存放博客相关文件

新建文件夹就不用说了吧~~ 🦊

CD到创建的文件夹下使用初始化命令

hexo init

Windows环境下CMD切换磁盘直接输入盘符+冒号即可切换到对应磁盘，如E:

之后使用cd命令即可进入对应文件夹，如cd myblog

⚠️hexo初始化命令需要从github下载文件到本地，要花费一定时间（3-5分钟都可能）并且有几率无法连接，需要多试几次。太长时间无反应就重新运行命令

⭐完成后即可看到相关文件

看到上面的提示即为初始化完成

初始化完成后，在同一文件夹下安装必须的依赖

1	npm install

至此，博客最基础的框架已经搭建完成

本地查看博客界面

输入以下代码打开本地服务，可以在本地查看网页效果

hexo s

弹出上述内容即为成功

在浏览器输入地址localhost:4000可以在本地打开页面

CMD窗口使用Ctrl+C即可退出查看

搭建过程总结

Hexo安装

1	npm install hexo -g

初始化博客

1	hexo init [文件夹名字]

安装依赖

1	npm install

本地预览

1
2
3

hexo sever
#或者
hexo s

注意：

安装依赖和本地预览时，终端要在创建的博客目录下执行，如本项目就在E:\myblog下执行这两条命令

发布博客到Github

Github仓库创建

Github的注册登录不在本篇博客的范畴，请自行搜索网络资源完成。

😔作为墙内神奇的存在，如果没有任何基础，访问GIithub大概率看运气，这里就默认大家能够访问了

登陆Github之后，点击右上角个人头像旁边的+，在出现的菜单中选择New repository(新建项目)

✨我这里使用了暗模式，你的应该是白色界面，内容是一样的

项目名一栏填写<用户名>.github.io（⚠️很！重！要！）

项目名格式是固定的：
🔑用户名即为注册时的名字，如果不一致，则该仓库无法提供网页支持
🔑github.io为创建网页仓库的固定后缀格式。
附 ·官方介绍·

项目选择public

至此github仓库创建完毕

仓库初始界面

本地git配置

在cmd中设置git的用户名与邮箱（后面借助git向github推送时git会检测这一信息）

1
2
3

git config --global user.name "你的Github用户名"
git config --global user.email "你注册时的邮箱"
将上面两句引号中的内容改为你自己的信息即可，执行后直接写入git中，终端看不到反应的（不~要~担~心~）

本地hexo配置

安装完上述过程后，可以在本地磁盘中看到相关文件，找到_config.yml,使用notepad++打开

拉到最后找到deploy配置，改为如下形式

deploy:
  type: git
  reop: 你的项目地址
  branch: main

⚠️冒号后面要加一个空格再写内容

repo后的项目地址可以从创建好的页面直复制

本地安装插件

设置完成后，在博客文件夹目录下执行命令安装插件

1	npm install hexo-deployer-git --save

上传文件至Github

在文件夹目录下依次执行hexo命令，cmd或者右键打开Git Bash Here

# 因配置文件进行了修改，需要清除缓存
hexo clean
# 生成网页文件
hexo g
# 上传文件至Github
hexo d

Tips：

上传时可能会提示输入Github帐号密码（第一次使用的话）

也有可能上传提示time out，多试几次

查看网页

上传成功后，在Github项目页面能够看到相关文件

在浏览器地址栏中使用项目名（<用户名>.github.io）即可访问个人网站

✨✨恭喜你，成功完成了最基础的网站搭建

Typora_V0.11.18安装包（全平台）：

蓝奏云：https://wws.lanzouo.com/b020t0suf 密码:aqdn

腾讯微云：https://share.weiyun.com/RbwUdRbD

百度网盘：https://pan.baidu.com/s/1-cQ8t3Upa48w2m-Kv_4aeQ 提取码：vvni

阿里云盘：https://www.aliyundrive.com/s/hkFtZm326Ws （仅win-64位）

本文链接： https://tianbiao.top/1-Windows下hexo+Github个人博客搭建/

枫与风