2020年最新Github+Hexo+域名搭建博客详解教程

一筋两堵 發表於 2020-6-14 22:19:00

2020年最新Github+Hexo+域名搭建博客详解教程

<h4 id="前言">前言</h4>
 本博客构建于2020年6月13日，看了网上的好几个教程发现都是要不关键步骤不够详细要不软件更新迭代过快自己的部分步骤与博主不相符下面让我详细介绍我的搭建之路。熟悉nmp操作的会很快上手，直接跳过node的安装
<h2 id="安装步骤">安装步骤</h2>
<h3 id="安装node">安装node</h3>
<h3 id="通过-nvm-安装nodejs注意需安装nodejs-100-及以上版本">通过 NVM 安装Node.js（注意需安装Node.js 10.0 及以上版本）</h3>
NVM：node.js version manager，用来管理 node 的版本。安装的步骤如下。
（1）我们去官网下载 NVM 的安装包：
<img src="http://ww1.sinaimg.cn/large/007R9vVkgy1gfqtfmmj4vj30vo0nttan.jpg">
下载下来后，直接解压到 <code>F:\dev</code>目录下：
<img src="http://ww1.sinaimg.cn/large/007R9vVkgy1gfqtlgs7gbj30kl05rmxj.jpg">
（2）在上面的目录中，点击install.cmd自动生成<code>settings.txt</code>文件，里面的内容填充如下：
<pre><code class="language-bash">root: F:\dev\nvm
path: F:\dev\nodejs
arch: 64
proxy
</code></pre>
上方内容的解释：
<ul>
<li>
root 配置为：当前 nvm.exe 所在的目录
</li>
<li>
path 配置为：node 快捷方式所在的目录
</li>
<li>
arch 配置为：当前操作系统的位数（32/64）
</li>
<li>
proxy 不用配置
</li>
</ul>
（3）配置环境变量：
<ul>
<li>
<code>NVM_HOME</code> = <code>D:\web\nvm</code>（当前 nvm.exe 所在目录）
</li>
<li>
<code>NVM_SYMLINK</code> = <code>D:\web\nodejs</code> （node 快捷方式所在的目录）
</li>
<li>
PATH += <code>;%NVM_HOME%;%NVM_SYMLINK%</code>
<img src="http://ww1.sinaimg.cn/large/007R9vVkgy1gfqtp34gyxj30gg07ejrh.jpg">
<img src="http://ww1.sinaimg.cn/large/007R9vVkgy1gfqtqbn47aj30el0ermxl.jpg">
</li>
</ul>
配置成功后，重启资源管理器。
验证：(在 cmd 中输入命令)
（1）输入<code>nvm</code>命令查看环境变量是否配置成功：
<img src="http://ww1.sinaimg.cn/large/007R9vVkgy1gfqtrobmuxj30qo0dct90.jpg">由于nvm默认的下载地址http://nodejs.org/dist/是外国外服务器，国内很慢可以使用淘宝的镜像。找到刚刚解压的nvm文件夹下的settings.txt文件在其后加入这两句话，并保存
<pre><code>node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
</code></pre>
（2）然后可以开始下载对应的node版本，推荐下载一个稳定版本和一个最新的版本下载最新版本直接执行指令nvm install latest就行了，稳定版本自己去官网找然后按nvm install 后面加版本号，例如nvm install 12.18.0 就能下载对应的node版本
（3）输入 <code>nvm ls</code>，查看已安装的所有 node 版本。
（4）输入 <code>nvm -v</code>，查看已安装的 nvm 版本。
（5）输入 <code>node -v</code>，查看正在使用的 node 版本。
（6）输入nvm use 版本号即可切换对应的版本。如输入命令nvm use 12.18.0后按nvm ls后node的版本前带有*号即代表当前使用的node版本
（7）由于npm的下载地址为https://registry.npmjs.org/是国外服务器，国内很慢可以使用淘宝的镜像执行下面的命令即可
<pre><code>// 配置地址
npm config set registry https://registry.npm.taobao.org
// 安装
npm install
//设置为原来的地址
npm config set registry https://registry.npmjs.org/
</code></pre>
<ul>
<li>参考链接：安装npm，nvm，node</li>
</ul>
如果 node 安装失败，可以参考上面这个链接再不行自己上网找。
<h3 id="注册github">注册GitHub</h3>
github
点击GitHub中的New repository创建新仓库。仓库名为：**你的用户名****.http://github.io 这是固定写法为了后面操作更简单，如我的
<img src="http://ww1.sinaimg.cn/large/007R9vVkgy1gfqvl3ssb4j30qx0jogms.jpg">
因为我已经有了这个名字的仓库所以才有这个警告，直接创建仓库
<h3 id="安装git期间git-bash-here窗口会弹窗要求你输入github的账号密码输入即可">安装git（期间Git Bash Here窗口会弹窗要求你输入GitHub的账号密码输入即可）</h3>
git真的是傻瓜式安装直接下一步下一步到了添加路径三选一选择的时候选择第二个Use Git from the Windows Command Prompt就行了直接自动帮你配置环境这些操作。在命令行输入git查看是否安装成功或者右击鼠标有以下显示
<img src="http://ww1.sinaimg.cn/large/007R9vVkgy1gfqurus3lzj30870bk0tj.jpg">
点击Git Bash Here一一输入以下指令（git的终端的复制快捷键是ctrl+ins，粘贴的快捷键是shift+ins，停止终端命令都和别的终端命令一样是ctrl+c）
<pre><code>git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
//生成ssh密钥文件：
ssh-keygen -t rsa -C "你的GitHub注册邮箱"
</code></pre>
然后会在你的C盘的用户下的.ssh会有这个文件，如
<img src="http://ww1.sinaimg.cn/large/007R9vVkgy1gfqvwfwndbj30s00e974w.jpg">
可能那个known_hosts文件没有生成，不过不用管他，之后在GitBash中执行某条指令是提示你缺少这个文件是否安装继续你就按yes就行，他自动帮你安装补全
然后用word或者记事本之类的软件打开上面的红色框文件，然后ctrl+A全部复制，回到你的GitHub，点击右上角的GitHub后按setting，然后按左边栏的SSH and GPG keys，然后点击绿色按钮New SSH key，出现以下文本框
<img src="http://ww1.sinaimg.cn/large/007R9vVkgy1gfqw0v72k7j31630me3zx.jpg">
这里的第一行title随便你填，把刚才的id_rsa.pub文本内容复制到key文本框，直接按绿色的按钮Add SSH key
在Git Bash中输入
<pre><code>ssh -T git@github.com
</code></pre>
<img src="http://ww1.sinaimg.cn/large/007R9vVkgy1gfqwfig8hbj30fj07laam.jpg">
提示这个直接按yes之后提示你xx用户，你已经成功认证
<h3 id="安装-hexo">安装 Hexo</h3>
这时我们在电脑里创建一个文件夹，可以命名为Blog，Hexo框架与以后你自己发布的网页都在这个文件夹中，然后在当前blog文件夹打开cmd，即进入blog文件夹可以按ctrl+L在任务栏输入cmd或者直接打开cmd后把blog文件夹拖拽到cmd窗口
所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。（使用npm安装插件有时会出现黄色的WARN直接无视它不是ERRO就没事,下同）
<pre><code>npm install -g hexo-cli
</code></pre>
<h3 id="进阶安装和使用推荐">进阶安装和使用（推荐）</h3>
对于熟悉 npm 的进阶用户，可以仅局部安装 <code>hexo</code> 包。
<pre><code>//推荐局部安装
npm install hexo
</code></pre>
安装完成后继续输入
<pre><code class="language-bash">hexo init blog
</code></pre>
然后一一输入以下指令
<pre><code>hexo new firstBolg
//生成静态网页
hexo g
//打开本地服务器
hexo s
</code></pre>
然后浏览器打开http://localhost:4000/，这是我们就可以看到自己初步形成的静态网站博客了，时不时有了大功告成的感觉了
<h3 id="hexo与github关联">Hexo与GitHub关联</h3>
这一步我们实现将自己的网页部署到网上，网址是GitHub提供给我们的xxxx.github.io访问
打开站点的配置文件_config.yml（即blog文件夹下的_config.yml），翻到最后修改为：
<pre><code>deploy:
type: git
repository: 你的仓库地址(如我的是https://github.com/xxydrr/xxydrr.github.io)
branch: master
</code></pre>
注意：deploy前面不要留空格，下面的三行话前面有两个空格。.yml的文件格式非常严格
然后在blog文件夹下打开cmd（blog文件夹下按ctrl+L在地址栏输入cmd按Enter即可），安装一个插件
<pre><code class="language-basemake">npm install hexo-deployer-git --save
</code></pre>
然后输入<code>hexo new post "article title"</code>，新建一篇文章。
然后打开<code>blog\source\_posts</code>的目录，可以发现下面多了一个<code>.md</code>文件，就是你的文章文件。
编写完markdown文件后，blog目录下右键打开git bash
依次输入以下三条命令
<pre><code>hexo clean
hexo g
hexo d
</code></pre>
完成后，打开浏览器，在地址栏输入你的放置个人网站的仓库路径，即xxxx.github.io,你就会发现你的博客已经上线了，可以在网络上被访问了。
<h3 id="绑定域名">绑定域名</h3>
我们要自己的个性化域名，这就需要绑定我们自己的域名。这里演示腾讯云的域名绑定，在国内主流的域名代理厂商也就阿里云和腾讯云。还没有购买域名的小伙伴可能要等几天才能进行域名绑定操作，因为域名注册后还要实名给注册局注册才能用。不过你可以先跳到配置hexo和主题选择部分继续操作
登录到腾讯云，进入管理控制台的域名列表，找到你的个性化域名，点击解析进入解释，参考我的
<img src="http://ww1.sinaimg.cn/large/007R9vVkgy1gfr1oxu9unj313b0n4wg4.jpg">
简单介绍以下记录值192.30.252.153和192.30.252.154是GitHub的服务器地址，最后的主机类型www记录类型A记录值是你的github域名
打开你的github博客项目，点击<code>settings</code>，拉到下面<code>Custom domain</code>处，填上你自己的域名，保存：
<img src="http://ww1.sinaimg.cn/large/007R9vVkgy1gfr51rxedlj30v70bugm8.jpg">
然后进入blog/source目录下，创建一个记事本文件，输入你的域名。
<img src="http://ww1.sinaimg.cn/large/007R9vVkgy1gfr54y7089j308y041745.jpg">
保存，命名为CNAME ，注意保存成所有文件即文件没有后缀
然后在blog目录下右键打开git bash
<pre><code class="language-bash">hexo clean
hexo g
hexo d
</code></pre>
这时候打开浏览器输入你的域名将会直接进入你自己搭建的网站。
<h3 id="配置主题">配置主题</h3>
如果你不喜欢Hexo默认的主题，可以更换不同的主题，主题传送门：Themes 我自己使用的是pure。
配置主题是非常复杂的事情，各个主题的源码不同配置方式也不同。因为首先你想要找到你自己喜欢的主题，然后点进去他的github下载源码到自己博客的themes文件夹下。因为每个人的审美不同，我自己的主题也是自己一步步配置的，找到自己喜欢的主题进去他的主题源码有个markdown文件教你怎么配置的了。在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。
所以我总结的配置主题方法就是找到自己喜欢的主题然后打开他的说明markdown文档以及上作者主题的GitHub查看Issue看看别人出现问题怎么解决自己有没出现，也可以去hexo官方文档查看博客主题配置，这样才能配置出自己喜欢的主题，下面我总结以下通用主题的配置方式
<h4 id="1添加背景动画">(1)添加背景动画</h4>
在\themes\{你的主题名}\layout\layout.ejs的</body>后中面添加

<h4 id="2添加404页面">(2)添加404页面</h4>
在\blog\themes\{你的主题名}\source 下新建404.html文件，404文件的样式源码可以自己上网搜我的是404源码
然后引入对应的css文件和images文件就行了
<h4 id="4后台管理插件hexo-admin">(4)后台管理插件hexo-admin</h4>
Github：https://github.com/jaredly/hexo-admin
简介：可以直接在网页端创建、编辑markdown文章内容，并将内容发布到_posts里。可以很方便的给文章加标题、分类、打标签。配置按照它的官网操作进行了
<h3 id="第一篇博客编写">第一篇博客编写</h3>
博客编写建议使用现在主流的markdown形式，markdown软件建议使用Typora编写或者用你的编辑器写也行
<pre><code>hexo new "hello blog"
</code></pre>
输入这条命令后将会在blog\source_posts文件夹下看到helloblog.md文T件，打开他的源代码形式是
<pre><code class="language-js">---
title: hello blog//题目
date: 2020-06-14 19:46:42//时间
tags: //标签
---
</code></pre>
这是基本的文章配置，注意一定要按照这样的格式在开头编写文章的配置，更多的配置请参考自己对应的主题markdown说明文档补充。
然后就可以编写文章了，下面是简单的markdown语法及其快捷键
<pre><code>Typora快捷键整合

Ctrl+1一阶标题 Ctrl+B字体加粗
Ctrl+2二阶标题 Ctrl+I字体倾斜
Ctrl+3三阶标题 Ctrl+U下划线
Ctrl+4四阶标题 Ctrl+Home 返回Typora顶部
Ctrl+5五阶标题 Ctrl+End 返回Typora底部
Ctrl+6六阶标题 Ctrl+T创建表格
Ctrl+L选中某句话 Ctrl+K创建超链接
Ctrl+D选中某个单词Ctrl+F搜索
Ctrl+E选中相同格式的文字 Ctrl+H搜索并替换
Alt+Shift+5 删除线 Ctrl+Shift+I 插入图片
Ctrl+Shift+M 公式块 Ctrl+Shift+Q 引用

注：一些实体符号需要在实体符号之前加”\”才能够显示

</code></pre>
<h4 id="图床准备">图床准备</h4>
这里我推荐使用微博图床，下面看我的超级简单方法
（1）安装这个浏览器插件新浪微博图床然后简直白嫖一样，点击插件然后在浏览器上登录自己的微博就能用了，图片不会存在自己微博的相册中也不会自动发微博啥的，然后点击这个插件还可以查看自己的历史图片
<img src="http://ww1.sinaimg.cn/large/0073y0I6gy1gfs5aai47gj30lu0f30t6.jpg">
然后拉进去就可以快乐插图片继续写文章了
<h4 id="发布文章准备">发布文章准备</h4>
建议首先依次输入这三条指令本地查看一下先
<pre><code>hexo clean //清除缓存文件 db.json 和已生成的静态文件 public网站显示异常时可以执行这条命令试试。

hexo g //生成网站静态文件到默认设置的 public 文件夹。便于查看网站生成的静态文件或者手动部署网站；如果使用自动部署，不需要先执行该命令hexo g 是 hexo generate 的缩写，命令效果一致。

hexo s //启动本地服务器，用于预览主题。默认地址： http://localhost:4000/hexo s 是 hexo server 的缩写，命令效果一致；预览的同时可以修改文章内容或主题代码，保存后刷新页面即可；对 Hexo 根目录 _config.yml 的修改，需要重启本地服务器后才能预览效果。

</code></pre>
感觉没问题后执行hexo d把它部署到自己的GitHub仓库中，接着我们就能在网上输入自己的域名查看效果了
<pre><code>
hexo d //自动生成网站静态文件，并部署到设定的仓库。hexo d 是 hexo deploy 的缩写，命令效果一致。

</code></pre>
之后我们常用的hexo组合指令是
<pre><code>
hexo clean && hexo s
hexo clean && hexo d
</code></pre>
然后就大功告成了，谢谢阅读！ 
来源：https://www.cnblogs.com/ibbo/p/13127388.html

頁: [1]

琼殿技术论坛's Archiver

2020年最新Github+Hexo+域名搭建博客详解教程