- 本文适用于任何会使用电脑、任何职业、任何年龄的感兴趣人员。无论你是计算机专业学生、还是非计算机专业任何人。
- 写本文之前小编已经清空了所有的相关文件,本文将会跟大家一样从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处进入控制台(可以先启动博客测试文章效果,觉得可以之后再上传)(修改配置文件需要重启博客,但对文章的增删改都不需要重启,刷新页面即可),进入控制台后键入下面三条命令
hexo clean
回车hexo g
回车hexo d
回车
- 刷新你的线上页面即可看到效果!
end
文章到此基本结束,如果您能看到这里,非常感谢!
我是江浒一只猫,欢迎观看!
http://www.longxin.xyz/QQ%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg