Hexo + 码云 全网最全无脑建站教程

• 本文适用于任何会使用电脑、任何职业、任何年龄的感兴趣人员。无论你是计算机专业学生、还是非计算机专业任何人。
• 写本文之前小编已经清空了所有的相关文件，本文将会跟大家一样从0开始一步步完成该实践，并同时记录此文章，如有兴趣实践，请认真观看。
• 由于考虑到可能会有小白实用此文章，故文章是从0开始搭建，会有些啰嗦，各位见谅。
• 本文编写+实践总耗时6h+。单实践按照本文预计时间0.5~2h完成建站。
• 同步演示站点：江浒一只猫
• 如要转载请注明出处，未经许可请勿擅自照抄本文，码字不易，非常感谢！

---

---

Hexo + 码云 简述

Hexo

• Hexo官方中文网：点此进入
• Hexo是一个快速、简洁且高效的博客框架
• Hexo博客由全静态文件组成，无后台服务加持

码云

• 码云官网：点此进入
• 码云是一个国产的GitHub（GitHub在国外速度较慢）
• 码云(GitHub)是一个代码托管平台

Hexo + 码云

• 使用码云托管Hexo博客，无需域名、服务器（零成本）
• 在访问速度上较GitHub提升N倍

准备

环境介绍

• node.js：node.js中文官网（博客运行基石）
• Git：Git官网（Git不是GitHub）（远程部署利器）

环境

• Windows10 & 64 位电脑（其它理论相同）
• 一个有兴趣+爱动手的人

下载

• 我整理的NodeAndGit包：https://lanzous.com/i9shxsf（永久有效推荐使用）
• node官方下载（通过我的链接下载请跳过此步）：进入首页，点击下载，进入下载页
  
  找到Windows64位.mis安装文件（与你电脑版本一致），下载
  
• Git官方下载（Git下载比较慢）（通过我的链接下载请跳过此步）：进入下载页，点击Windows图标
  
  点击64-bit Git for Windows Setup（与你电脑版本一致）下载
  
• 提示：下载完有这样的两个文件
  

安装

• node安装：双击node-v12.16.1-x64.msi程序，一路向下next，如果要设置安装路径按照自己喜欢的设置（不要有中文或其它非常规字符），默认也行（无脑式安装）
  
  此处请将安装的目录位置路径拷贝至记事本记录一下，后面会用到，如果找得到就不需要记
  
  
  这里不用管直接下一步走完
  
  安装完最近添加会多出这么三个图标，进入划线（Node.js command prompt）的那个
  
• 检查是否node是否安装成功 ：键入命令node -v回车，键入命令npm -v回车，如图显示版本号即成功
  
• Git安装：双击下好的Git-2.23.0-64-bit.exe，按照自己喜好选择安装位置（不要有中文或其它非常规字符），也可默认（此处请将划线的目录信息拷贝至记事本记录一下，后面会用到，如果找得到就不需要记）
  
  后面的比较多，直接无脑式下一步，默认安装。
  
  点击Git Bash，显示如下，安装成功
  
  安装好后一般情况还无法使用系统cmd来调用git，需要配置环境变量，Win + E打开文件管理，右击左侧此电脑->属性进入系统面板
  
  点击高级系统属性->环境变量，在环境变量面板的系统变量找到“Path”，点击左下编辑按钮
  
  点击新建，在下面框框中填入[Git安装环节所记录的安装目录信息] + “\bin”，我安装时目录信息是 E:\WorkingFail\Git ,所以这里要填 E:\WorkingFail\Git\bin 。
  
  重复上述操作，将node的安装目录信息添加到后面，node这里只需添加安装路径即可，例如我安装时路径是 E:\WorkingFail\node 就填入它即可。
  
  之前的小窗口每一个都要点确定。
  
• 检查Git是否安装成功：Win + R打开运行面板输入cmd打开控制台，键入 git 回车，如图成功
  
• 检查node能否被计算即使用：如上在控制台键入 node 回车，有信息即成功
  
  恭喜安装环境结束！

建站

建站初始化

• 打开安装好的node命令窗：Node.js command prompt(测试安装是否成功的那个)
• 键入命令 npm install -g cnpm --registry=https://registry.npm.taobao.org（代码命令均可复制粘贴）安装淘宝镜像，原npm属于国外节点，反应较慢
  
  键入命令 cnpm -v 回车检验安装是否成功，出现信息则为成功
  
  键入命令 cnpm install -g hexo-cli 回车安装Hexo博客框架
  
  键入命令hexo -v回车检查是否安装成功，成功即初始化完成。
  

博客创建

由于现在只是搭建好了博客运行的环境，还没有正式可以运行的博客，现在就来创建它。

• 键入命令 hexo init mblog (注意这里的“mblog ”是将要创建的博客文件目录，可按喜好任意命名)，完成后即初始化博客完成。如果出现以下问题，意思是Node没找到Git，返回安装条目，检查git是否安装成功。
  
  没有问题的话会显示正在下载，等一会即可
  
  红色的线是下载的相关博客文件的存储地址，拷贝下来，win+E打开文件管理器粘贴此地址回车就能进入下载的文件目录（如果以后怕找不到，建议使用记事本记录）
  
• 测试是否博客创建成功：在如上图的位置键入字母 cmd 回车进入控制台（记住这种启动方式是从哪个地方进入，后面会经常启动调试）
  
  在控制台键入 hexo s 启动博客， 成功后如图所示
  
  将 http://localhost:4000 拷贝至浏览器打开，大工告成！
  
  博客创建完成！
  在控制台键盘同时按Ctrl+C将会询问你是否停止博客，按y确认停止，hexo s可在启动！
• 当每次修改文件后记得先停止博客，再重新启动访问！

更改主题

初始主题不好看而且是英文

• Hexo官方主题集合站点：点此进入（加载可能较慢，请耐心等待）
• 寻找你喜欢的主题（主题内部基本不一样，这里怕出错就跟着我一样选择A-Ayer，相对简单，大佬请选择性忽略）
• 点击封面图可以进演示站点预览效果，点击左下角名称可以跳转至下载页，由于国外网速较慢，这里提供一个包快速下载链接：点击下载
  
• 下载好后将改文件拷贝至博客文件目录的themes文件夹下，例如我这里是这样的
  
  之后将原有的landscape文件夹删除（注意先将刚才使用控制台命令hexo s启动的控制台关掉），然后解压landscape.zip，相当于替换掉原来的主题文件。
  再回到外面一层目录，
  
  按照刚才的启动方法，在文件名栏输入cmd回车进入控制台，键入hexo s启动，浏览器访问http://localhost:4000/
  
  本地建站完成！

更改信息

• 更改网站名称、头像、二维码、logo等信息
• 提示：更改时请注意：示例title: Hexo在冒号后面（Hexo前面）必须有空格，所有需要配置的地方都是如此
• 更改信息：找到博客文件目录mblog下的_config.yml文件使用记事本打开，找到以下片段，可以参考我的更改示例更改

title: Hexo				#博客名称——此处修改成你喜欢的名字  示例: title: 江浒一只猫
subtitle: ''			#副标题						  
description: ''			#描述
keywords:				#关键字
author: John Doe		#创建文章时的作者名			  示例: author: 江浒一只猫
language: en			#语言
timezone: ''			#时区

保存退出，在mblog目录的地址栏输入cmd回车进入控制台键入hexo s启动，浏览器访问http://localhost:4000/，我的是这样

• 更改头像、logo、二维码等信息（请事先准备好头像、微信二维码选择准备、QQ二维码选择准备，logo选择准备，然后准备好的图片按照你的习惯统一格式命名方便找），选择准备是因为作用不是很大，这里更换教程会写上，大家请按需选择是否更换。
  打开mblog->themes->landscap文件夹，也就是之前下载的主题包文件夹，进入source目录，再进入images目录，将你准备的图片粘贴进去。细心的朋友你就会看到我的头像和二维码，如果你的图片格式跟我的一样，你可以直接把你的图片名改成已存在的文件名覆盖它。格式不一样的图片不要动它，往下看（我的图片可以删掉）
  
  返回上一层，找到_config.yml文件记事本打开，（我们注意到，在loandscape文件夹下包含_config.yml文件，在mblog文件夹下也包含_config.yml文件，这里说明一下，mblog文件夹是我们创建的博客的文件夹，层级较高，故这个文件夹下的_config.yml文件属于博客的总体信息配置文件。另一个_config.yml在我们下载的主题包中，故这个_config.yml是主题的配置信息）

找到以下列举代码块：

# 网站图标和侧边栏logo
favicon: /favicon.ico			#博客状态栏小标题
logo: /images/头像.png			#博客logo——此处请将[头像.png]更换成你的头像全名

# 原微信二维码图片地址
weixin: /images/微信二维码.png	#更为你的微信码，关闭则在weixin前加'#'屏蔽：#weixin：

基本信息更改完毕！

上线部署

申请码云账号

• 码云官网：点此进入
• 右上角注册，注册过程不再详细阐述，请自行完成注册并登录
  

建立仓库

• 登录后点击右上角头像旁边的+号，展开后点击新建仓库
  
  创建仓库时需要填好仓库名称，将是否开源选择为公开，然后创建即可
  
  创建成功如图
  
  点击HTTP|SSH右边框框的复制按钮复制改地址，即你的仓库地址。

配置仓库

• 添加码云仓库地址（远程部署使用）
  打开你的博客地址（博客地址如果忘了，请回看博客创建条目），mblog文件夹下，找到_config.yml文件记事本打开，
  在文本的最后位置添加复制以下代码，

deploy:
  type: git
  repo: https://gitee.com/longxin666/blog-hexo.git 	# 此处改成你的仓库地址——repo: 你的仓库地址
  branch: master
  message:    # 自定义提交消息

添加后你会发现元本含有两行deploy:和type:''，请手动删掉上面这多余的两行（如果没有这多余的两行，请看看你是不是进错了配置文件），删完先不要退出往下看

• 将你的仓库名（你创建仓库时的仓库名，例如我的仓库地址是https://gitee.com/longxin666/hexo-mblog.git，那么我的仓库名就是hexo-mblog）复制然后在_config.yml文件的下面示例中（文本位置靠上）

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com	#改为你仓库地址 #示例 url: https://gitee.com/longxin666/hexo-mblog.git
root: / 					#原本此处是空的  #复制后示例 root: /hexo-mblog

这里改完后接下来的步骤请仔细更改，在mblog\themes\landscape文件夹下的_config.yml配置文件，记事本打开，类似更改头像的操作，这里需要将原有的目录添加一层，不然图片没法显示，

# 网站图标和侧边栏logo
favicon: /favicon.ico   			#更改为：/hexo-mblog/favicon.ico
logo: /images/头像.png   			#更改为：/hexo-mblog/images/头像.png

cover:
  enable: true
  path: /images/cover1.jpg       	#更改为：/hexo-mblog/images/cover1.jpg 
  logo: false #
  
# 原微信二维码图片地址
weixin: /images/微信二维码.png		#更改为：/hexo-mblog/images/微信二维码.png

更改完后，重启测试，浏览器打卡如果没有问题就可以开始部署了。

部署

• 停止博客，控制台键入hexo d回车部署，这里我在进行到这一步时报错了
  
  最后一句ERROR Deployer not found: git意思是没找到git仓库。
  Hexo这边还没使用Git，我们就在控制台键入命令cnpm install --save hexo-deployer-git让hexo能够使用git
  
  再试一次控制台键入hexo d回车部署，没有报错即成功
  
  我们转到游览器的码云上去你的仓库看看，刷新你的仓库，会出现一堆文件，说明代码已经上传成功
  
  接下来点击右边划红线的“服务”（上图），点击Gitee Pages
  
  在新页面直接点击启动
  
  过几秒启动之后会出现如图所示的网站地址，点开它，就是你的网站地址。
  
  你现在完全可以在手机端或者其它任何设备上访问改站点
  
  上线部署完成！

发表文章

写文章

• 这里的文章完全采用markdown格式，这里网上有很多方法编写，我只给大家将一种

• 在线编辑-线下保存：推荐网站：在线编辑，里面会有原文实例，可自行参照，编写完后，将内容全部拷贝（注意是从编辑区拷贝，试图区只是预览用的），在你本地的博客文件夹下的mblog\source\_posts文件夹下是存放文章的地方，新建一个文本文件将内容拷贝进去保存退出，将文件重命名后缀为.md的文件（文件名随意，实例：我的第一篇博客.md）

• 另外为了达到好的展示效果，你需要在你的文章摘要或者标题后面加入<!--more-->分割，意思是在网站上你没有打开文章时显示的是<!--more-->之前的部分，当你点击阅读更多时才会展示整片文章。（仅在本主题下有效）
  

• 提示：如果要文章显示图片或引用链接请按照以下形式，你可以将示例复制看看效果

[链接描述](链接地址)		#示例：[点此进入](https://gitee.com/)

#注意：你可将图片与你的文章放在一起，这样可以引用到，或者在文章的同级目录新建一个图片文件夹
#示例：![图片](/a.png)意思是引用于文章放在一起的图片a.png
![图片描述](图片地址)		#示例：![图片](/a.png)	

上传文章

• 此处需要格外注意，上传之前需要先清扫仓库再上传，有三个指令
• 博客目录mblog处进入控制台（可以先启动博客测试文章效果，觉得可以之后再上传）（修改配置文件需要重启博客，但对文章的增删改都不需要重启，刷新页面即可），进入控制台后键入下面三条命令

1. hexo clean 回车
2. hexo g 回车
3. hexo d 回车

• 刷新你的线上页面即可看到效果！

end

文章到此基本结束，如果您能看到这里，非常感谢！

我是江浒一只猫，欢迎观看！

http://www.longxin.xyz/QQ%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg