Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ

文章目录

  • **写在之前**
  • 一、搭建前的准备工作 - 安装工具
    • 1.1 附上工具链接
    • 1.2 Git
    • 1.3 Node.js
    • 1.4 GitHub Desktop
    • 1.5 Notepad++
    • 1.6 安装 Hexo
  • 二、配置 Hexo
    • 2.1 建立网站
    • 2.2 配置Hexo
    • 2.3 查看本地网站
  • 三、部署 Hexo 到 GitHub
    • 3.1 准备
    • 3.2 安装部署插件
    • 3.3 配置 Git
    • 3.4 配置站点 _config.yml 文件
    • 3.5 发布到 GitHub
  • ==末文彩蛋== ~~**来啦来啦**~~

写在之前

看过许多其他教程,但在搭建过程总会出现一些这样或那样的意外,看完之后仍然感觉不明其理,迷迷糊糊的,究其原因——大多教程总会忽略一些大神不care,小白不know的细节(此处非是嘲讽也许是因为大神在写教程时都没有意识到一些再简单不过的细节(是的,对于他们来说,这根本不能称之为问题?!),然而对于0基础、小白来操作时,却会导致搭建失败),故落笔此文。当然,不能说此文详尽无缺,只是说同样作为小白的我,也许站在小白的立场上,考虑到的问题、步骤会尽可能的详细,看完此文也许会有着意外收获哟!超级暗示: 末文有彩蛋!
本文对象:搭建博文的 0 基础、小白
本文提示

  1. 小白不要一开始或者幻想着花个几十分钟(没错,这就是幻想!)就搭个高大上的博客界面出来——一步一个脚印!至少我在github上(应该知道该平台吧?!emmm……不知道也请暂时跳过,下文会讲)看的那些大神的博客(酷炫!精致!高大上!)无不是有着100多次(或接近)的commits,所以请耐心吧!
  2. 也不要一上来就直接fork别人的项目,至少在搞清楚怎样搭建博客框架前不要,否则fork之后也不会操作,白白浪费时间……(哇,这人好啰嗦啊……你是这样想的!)嗯……咱脱离软文频道,开始干货!

一、搭建前的准备工作 - 安装工具

个人认为,对于小白来说,以下工具是必须的,至少极大的方便了操作

1.1 附上工具链接

所需工具的百度云链接
提取码:z22c
不过所有工具都只是当前的最新版,建议还是按下面官网链接一一下载吧。不介意的就直接百度云下载,简单迅速!

1.2 Git

Git 官网下载Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第1张图片
小技巧1:从博客搭建到发布整个过程,最重要的是要熟悉对终端命令行界面的使用。
Git是一个分布式版本控制系统(我也不懂…… ),我们只要知道我们要做的就是对它进行输入命令行就够了。

  1. Git Bash Here
    启动:鼠标光标移到任一文件夹或在任一文件里,单击右键,就能看到两个新图标:1. Git GUI Here 2. Git Bash Here,而我们要用到的就是Git Bash Here
  2. Windows PowerShell
    PowerShell是Windows环境自带的壳程式(shell)及脚本语言技术,算是cmd的升级版,相当于Linux的命令提示符(Shell)emmm……我们暂且就称之为命令行界面吧。
    启动:按下【Win】键打开“开始”菜单就能看到Windows PowerShell,界面如下:
    Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第2张图片
    或者打开你的目标文件夹(任一文件夹里),按住【Shift】键 + 右键,菜单栏就会多出“PowerShell窗口”这一栏,点击就行了。
    这里提到此的原因是在搭建博客时,使用PowerShell就能起到Git的作用,但奈何Git的功能更强大,而且,在PowerShell中不能使用“&”字符,如输入命令(该命令是配置好Hexo才有用,且用于部署博客,先不要自己随便“试错”,这里看我的演示就好了):
hexo clean && hexo d -g

在PowerShell中,会显示报错:
Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第3张图片
“&&”类似于连续的意思,所以解决办法就是分步运行:
先输入

hexo clean

得到反馈后再输入

hexo d -g

而在Git上,带有“&&”字符的命令行却能完美运行,极大的提高了效率,所以建议使用Git,当然,Git其他强大的功能就不列举了(我还没实践到…… ),自己去慢慢体会,所以下文我们用到的都是Git(喜欢用PowerShell也可以选择它,毕竟从窗口美观程度来看还是PowerShell看着舒服,而且其有“属性”这一功能,能根据自己喜好调节字体大小、背景颜色这些)。

小技巧2:在命令行界面需要用到复制粘贴操作时,禁用快捷键(Ctrl + C、Ctrl + V),要用鼠标老老实实操作(电脑小白操作),有一点不同的是,当你已经在别处复制了一段命令(即剪贴板已经存有内容),需要输入到命令行界面时,在PowerShell窗口只要单击右键就能将命令显示在界面上,然后【Enter】键执行。

1.3 Node.js

Node.js 官网下载

Hexo 使用 Node.js 编写,得益于 Node.js,使得 Hexo 生成上百个页面游刃有余。这里选择 LTS 版本下载:
Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第4张图片

1.4 GitHub Desktop

GitHub Desktop 官网下载

是GitHub的桌面版,且能简化 Hexo 发布博客的步骤,自动对比上传代码的差异……

1.5 Notepad++

Notepad++ 官网下载

Notepad++ 是程序员必备的文本编辑器,软件小巧高效,支持27种编程语言,通吃C,C++ ,Java ,C#, XML, HTML, PHP,JS 等,推荐各位下载使用,Notepad++ 可完美地取代微软的记事本。

以上工具默认安装位置(即点击next)就好,毕竟所占存储都不大,当然,系统盘堪忧党也可选择安在其他盘……

1.6 安装 Hexo

以上工具安装好后,即可使用 npm 完成 Hexo 的安装。
这里我们先新建一个文件夹Blog(名称可改),以用来配置Hexo。
注意:为避免出错,下文未特殊说明的话,我们启动Git Bash窗口的位置都要在这个文件夹里(搭建失败的原因,很大一部分原因是不能正确选择启动Git Bash窗口的位置)。
输入命令:

npm install -g hexo-cli

Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第5张图片
这里按【Enter】键执行后,一定要耐心等待反馈!!!这里再强调一下,所有命令行在按下【Enter】键执行后,都要等到再次出现输入提示才能输入命令!(有些朋友输入命令执行后,看着界面没有反应,以为是命令无效或者……卡住了……然后就把窗口关了……其实一直在运行,只不过需要时间而已,这点得看电脑配置和网速。不管命令有效还是无效,都会出现相应反馈,我们也才能再次输入命令)。

二、配置 Hexo

2.1 建立网站

刚刚的文件夹Blog(名称可改)就是你的网站根目录
在该文件夹下,启动Git Bash窗口,输入:

hexo init

等待一会,网站就建立好了。

有些教程里是这样写的:

mkdir  		# 建立根目录
cd 			# 进入该目录
hexo init 	# 初始化网站目录

其实小白不太明白其含义,反而会出错,倒不如按我所说——手动建立一个文件夹,在该文件里启动Git Bash输入hexo init,简单直接。

2.2 配置Hexo

初始化后的文件夹是这样的:
Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第6张图片
Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第7张图片
小技巧3:打开这些代码文件时要使用 UTF-8编码格式,不然很有可能会乱码或出错,notepad++貌似已经默认是此格式了。

小技巧4:该文件是.yml,在 YAML 语法中,冒号后面必须要空一个格
Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第8张图片
以上参数(英文单词)以及接下来的命令行含义可以暂时先不管,只要跟着输入就好了,毕竟我介绍的也并不全面,索性先不说,末文会有详细的说明链接0基础、小白必看!看了之后一定会明白很多。

2.3 查看本地网站

再次说明,上文所说在网站根目录下启动Git Bash窗口,并不是指每次输入命令都要去打开Blog文件夹,然后再启动,只要窗口上显示的位置是网站根目录就行了。
在Git Bash继续输入:

hexo s

Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第9张图片
如上,表示你的本地网站已经运行了,这里指的是本地,并没有部署到 GitHub上(下文讲),你可以理解为这是你博客发布之前的预览

小技巧5:无论是编辑博客界面还是博客内容,其实在发布之前我们都不知道是什么样子,这个时候我们就可以善用本地查看这个预览功能了,从而做出及时修改。不过需要注意的是,我这里初始化文件夹后就没有对其中任一文件进行编辑,所以可以直接只输入 hexo s ,若对任一文件编辑后,命令就要变成 hexo clean && hexo s (没错,就是先要初始化一下),下文会用到。
现在我们来预览初始化后的网站界面,方法:直接在命令行界面用鼠标选中网址然后复制(不要用键盘快捷键),在浏览器打开。

小技巧6:只要是用Hexo驱动的博客,本地查看网址都是 http://localhost:4000 ,只是每次在预览前,都要先输入命令让其运行起来,才能查看。
预览界面:
Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第10张图片
然后按住Ctrl + C 使本地博客界面停止运行。

三、部署 Hexo 到 GitHub

3.1 准备

  1. 若无账号,前往 GitHub 注册一个 GitHub 账号,注册流程不复杂,填写账号和邮箱就行了,这里补充的是,账号名称由你自己取,一旦注册,名称就不能更改,以后的仓库地址及个人博客网址都会是这个(当然购买域名的话是可以改的,但小白就暂时不要考虑了),所以考虑好再取(至少取个好看点的……就跟取名字似的……)。

  2. 新建一个公开仓库:
    Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第11张图片
    Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第12张图片
    Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第13张图片
    注意此图片的信息,新手上路的话,我建议先建立个 .txt 文档(随意),点复制按钮将仓库地址(二选一记下来(下文会用到),如下是本人的(其实只要记住网址格式就ok了,不过,偷个懒,直接复制……):
    HTTPS:
    https://github.com/3691MCWL/3691MCWL.github-io.git
    SSH:
    [email protected]:3691MCWL/3691MCWL.github-io.git

注意到两个仓库地址格式不一样了吧,所以要选择相应的仓库地址,SSH建立私人秘钥的时候才会使用,这里我们就选择 HTTPS

3.2 安装部署插件

在之前的Git Bash(网站根目录下)输入:

npm install hexo-deployer-git --save

执行后输入:

npm install hexo-server --save

所有的命令行都是分步执行,所以之后命令不再分开写。

3.3 配置 Git

如果你只是安装好了 Git 但没有配置过你的 Git ,那么现在需要做的第一件事情就是设置你的 Git 用户名和邮箱。 在 Git Bash 中执行以下两条命令配置你的用户名和邮箱,这里建议用户名和邮箱与你的 GitHub 用户名和邮箱保持一致。

git config --global user.name "Your_user_name"  		# 自己书写时不要打双引号,注意空格
git config --global user.email [email protected]

小技巧7:这里的Git用户名和邮箱可以在GitHub Desktop上更改(用户名可以随意更改邮箱就不要乱改了,毕竟费事……)。
操作方法:
启动GitHub Desktop登录GitHub账号,点击顶部导航栏 File →Options → Git ,ok!

3.4 配置站点 _config.yml 文件

用Notepad++打开网站根目录下的_config.yml 文件(上文已指出),然后滑到最下面,找到 deploy 代码块进行相应更改,这里就要用到刚才记住的 HTTPS 仓库地址了(注意冒号后空一格)。

deploy:
  type: git  				# 类型填git
  repo:  	# 你的Github仓库地址
  branch: master  			# 分支名称。默认填写 master 若你使用的是 GitHub ,程序会尝试自动检测。

如我的是:

deploy:
  type: git
  repo: https://github.com/3691MCWL/3691MCWL.github.io.git
  branch: master

3.5 发布到 GitHub

最后一步,在网站根目录下(我上文建的文件夹Blog),执行如下命令即可部署到 GitHub Pages 上。

hexo clean && hexo d -g

注意:!!!

若这是第一次使用(0基础肯定都是),会弹出一个 GitHub 登录框,登陆你的 GitHub 账号, 紧接着,Git Bash 窗口也会依次出现登录框的信息:账号+密码,值得一提的是,在输入密码时,屏幕上的光标不会随着你密码的输入而有所移动,也就是不会显示你的密码,此时,容易使人误以为没有反应,其实不然,你只要正常按键盘输入密码就行了,最后点【Enter】键执行(由于看不见密码的输入情况,所以千万别输错了,否则只能等待 Git Bash 窗口报错或者关闭窗口重新输入命令行 hexo clean && hexo d -g 了)。
Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第14张图片
发布成功后,GitHub 上,就不再显示代码块了,显示的是网站根目录 Blog 下的子目录 public 的内容:
Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第15张图片
对比一下,发现是一样的:
Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第16张图片
然后点击Settings,鼠标滑动到 GitHub Pages

小技巧8:在步骤 3.1 准备 中,新建仓库之后(也就是界面还是代码块的时候),GitHub Pages 中是没有你的博客地址的,也就是说,只有在步骤 3.5 发布到 GitHub 成功后,博客地址才会在 GitHub Pages 里出现。
Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第17张图片
将你的博客地址在浏览器打开:
Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀ&ᵀᴴ_第18张图片
此即表示搭建成功!不过,这只是第一步,距离实现 别人的博客 ……还需要不断学习。
万事开头难,只要懂了原理这一步,其他就只是时间问题了。我已经尽可能的详细,希望对你有所帮助。小小赞一下吧
至于域名解析(步骤固定,没什么有争议的地方)、更换themes、fork项目就看看其他教程吧。

末文彩蛋 来啦来啦

我这里推荐几个网址:小白 → 高级玩家必看!以供学习。

  • Easy Hexo
  • Hexo 官方文档
  • Git教程
  • HTML 5 教程

再贴几个我看到的比较精致的博客,以供欣赏(免费打广告有木有……)

  • 遇见西门
  • 楚门
  • HCONLY
  • Hux Blog

此文至此……欢迎评论交流,一起擦出思想的火花……

你可能感兴趣的:(小白,孜孜求学计算机,博客搭建)