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

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


Hexo + 码云 简述

Hexo

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

码云

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

Hexo + 码云

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

准备

环境介绍

环境

  • 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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页