Hexo搭建详细教程Windows10

Hexo搭建教程 阅读量

Hexo搭建及部署Github外网访问详细教程Win10

简介

Hexo - 快速、简洁且高效的博客框架。
本搭建教程是不需要自有服务器的，只需要注册个Github账号就可以，完全免（Bai）费（Piao）主要是托管在Github上面。如果比较在意独立域名以及访问速度等等，可以花钱的哈~

Nodejs安装及环境变量配置

_Nodejs下载及安装


安装时注意修改安装目录，建议放在非C盘目录下，最好不要带有中文的文件夹，一路默认安装即可；

  • 安装后检查；

安装完成后启动命令行工具（CMD），输入以下检查代码

1
2
node -v
npm -v

查看安装版本，出现提示版本信息即为安装成功 。

更换NPM全局模块路径

这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install 模块名 [-g] 的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。本文是将 > nodejs 安装在 > D:\RuanJian\NodeJS 目录下,以下操作可根据实际安装目录情况进行对应调整。

  1. 在安装目录下，如 D:\RuanJian\NodeJS 新建两个文件夹 node_global(全局包存放目录) 和 node_cache(缓存目录)；

  1. 打开命令行工具，执行以下两句操作：
1
2
npm config set prefix "D:\RuanJian\NodeJS\node_global"
npm config set cache "D:\RuanJian\NodeJS\node_cache"
  1. 配置环境变量：

  • 打开系统属性-高级-环境变量，在系统变量中新建 变量名：NODE_PATH,变量值：D:\RuanJian\NodeJS\node_global\node_modules;

    ![](https://cdn.jsdelivr.net/gh/sanocc/PicGoCDN/img/20200319173753.png)

  • 编辑用户变量的 path，将默认的 C 盘下 APPData/Roaming\npm 修改为 D:\RuanJian\NodeJS\node_global；

    ![](https://cdn.jsdelivr.net/gh/sanocc/PicGoCDN/img/20200319173824.png)

  • 保存即可。

国内备用源：淘宝NPM镜像

由于国内网络环境限制问题，使用 > npm 安装包时，会遇到时间长，甚至安装失败的问题，建议使用淘宝镜像，具体方法参见官网 > 淘宝镜像官网
可使用官方推荐的 cnpm 命令行工具代替默认的 npm:

1
npm install -g cnpm --registry=https://registry.npm.taobao.org`

注意：有时使用 cnpm 安装的路径可能回存在问题，在使用react-native开发应用时会出现问题。此时可以使用nrm切换淘宝源：

1
2
3
npx nrm use taobao
// 以下方式切换回官方源
npx nrm use npm

安装Hexo

进入D盘创建一个文件夹，命名为BLOG（你随意）这个文件夹就是用来放博客所有文件的地方。进入文件夹后，按住Shift键同时右键鼠标。

1.首先来安装博客框架

点在此处打开PowerShell窗口(S) ，使用npm命令来安装Hexo安装后会有几个WARN报错，直接无视它。

1
npm install -g hexo-cli

然后验证安装成功的版本

1
hexo -v

然后进行初始化Hexo

1
hexo init

安装npm依赖插件

1
npm install

生成Hexo静态网页

1
hexo g

开启本地服务器进行预览

1
hexo s

浏览器进行浏览

打开浏览器输入网址 http://localhost:4000

如果想关闭本地预览，Ctrl+C 或者 关闭命令窗口

Hexo常用命令汇总

1
2
3
4
5
6
7
8
9
hexo new "一个新的文章名字"    #这是创建新的文章的命令
hexo new page "名字"     #新建一个页面如about等
hexo g    #生成静态网页
hexo s    #启动本地服务
hexo d    #部署到github或别地方

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

简写命令汇总

1
2
3
4
5
6
7
8
9
10
11
hexo n “文章名” == hexo new “文章名” #新建名为“文章名”的文章
hexo n page "名字" == hexo new page "名字"     #新建一个页面如about等
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

Hexo美化

看到这个博客是不是瞬间无爱，简直是丑爆了。我们可以更换喜欢的主题哦，网上教程有很多，大神们也可以自己制作哦，下面转移到官方主题网站。

Hexo修改永久链接的默认格式

Hexo的永久链接的默认格式是 :year/:month/:day/:title/，比如访问站点下某一篇文章时，其路径是 2018/04/12/xxxx/，如果我们的文章标题是中文的，那么该路径就会出现中文字符。

在路径中出现了中文字符很容易引发各种问题，而且也不利于seo，因为路径包含了年月日三个层级，层级太深不利于百度蜘蛛抓取。

解决办法就是利用其它的插件来生成唯一的路径，这样就算我们的文件标题随意修改，而不会导致原本的链接失效而造成站点下存在大量的死链。

安装插件

在站点根目录使用 git bash 执行命令：

1
npm install hexo-abbrlink --save

修改站点配置文件

打开根目录下的 _config.yml 文件，修改如下配置：

1
2
3
4
5
6
# permalink: :year/:month/:day/:title/
# permalink_defaults:
permalink: posts/:abbrlink.html
abbrlink:
 alg: crc32  # 算法：crc16(default) and crc32
 rep: hex    # 进制：dec(default) and hex

这里将页面都添加了 .html 的后缀，用来伪装成静态页面(虽说Hexo的页面本身就是静态页面)，这样可以直接从路径就知道这是个静态页面，方便seo。

接下来重新生成，部署，预览。

可以看到我们的文章路径变成了 /posts/xxxxx.html，接下来就算我们将文字标题命名为中文也没问题了。

根目录下输入
hexo clean**清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。**
hexo g**生成静态网页，然后输入**
hexo s**可以本地预览效果，最后输入**

写文章、发布文章

首先在博客根目录下右键打开git bash，安装一个扩展

1
npm i hexo-deployer-git

然后输入

1
hexo new post "article title"  ===新建一篇文章

然后打开D:\WEB\BLOG\source\_posts的目录，可以发现下面多了一个文件夹和一个.md文件，一个用来存放你的图片等数据，另一个就是你的文章文件啦。
编写完markdown文件后，生成，部署，预览。

Git安装教程及连接Github -Win10

Git下载

进入官网下载区域，找到与自己系统相适应的版本进行下载；

另一个简单的方法是安装 GitHub Desktop。 该安装程序包含图形化和命令行版本的 Git。 它也能支持 Powershell，提供了稳定的凭证缓存和健全的换行设置。 稍后我们会对这方面有更多了解，现在只要一句话就够了，这些都是你所需要的。 你可以在 GitHub for Windows 网站下载。

Git安装


完全的自动安装，直接一路Next…

测试检查

在cmd窗口中，输入git显示如下就是安装成功啦！

Git连接Github

首先在Github上注册一个账号。
在右键菜单里点Git Bash Here

在打开的窗口输入，设置user.name和user.email配置信息

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

然后生成ssh秘钥文件

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后按回车键，进行下一步，继续回车（三次左右）

进入C:\Users\sance.ssh就可以看到2个文件


打开id_rsa.pub,将里面所有的内容全部复制出来。
进入Github设置SSH key点New SSH key

Title随便输入自己方便辨识就可以了，Key粘贴刚才从id_rsa.pub,将里面复制的所有内容，然后点击Add SSH key

测试Github连接

在Git Bash中输入

1
2
3
ssh git@github.com

稍后输入yes


这么显示，就是连接成功啦~

Hexo部署到Github详细教程

GitHub创建个人仓库

登录到GitHub,
点击GitHub中的New repository创建新仓库，

仓库名应该为：用户名.github.io 这个用户名使用你的GitHub帐号名称，这是固定写法！！

如图所示，然后点击 Create repository 就完成了新仓库的创建。

进入新仓库，点击Settings，

向下拉到最后有个GitHub Pages，点击Choose a theme选择一个主题。

进入主题模板选择，这里随便选一个都可以，我这里选的是默认的哈，然后点击Select theme

推送本地Hexo到Github上

接下来要做的就是就是推送网站，也就是发布网站，让我们的网站可以被更多的人访问。在设置之前，需要解释一个概念，在blog根目录里的_config.yml文件称为站点配置文件，如下图

进入根目录里的themes文件夹，里面也有个_config.yml文件，这个称为主题配置文件，如下图

下一步将我们的Hexo与GitHub关联起来，打开站点的配置文件_config.yml，翻到最后修改为：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/用户名/用户名.github.io.git
  branch: master

保存站点配置文件。
其实就是给hexo d 这个命令做相应的配置，让Hexo知道你要把blog部署在哪个位置，很显然，我们部署在我们GitHub的仓库里。最后安装Git部署插件，输入命令：

1
npm install hexo-deployer-git --save

这时，我们分别输入三条命令：

1
2
3
hexo clean 
hexo g 
hexo d

其实第三条的 hexo d 就是部署网站命令，d是deploy的缩写。

完成预览

打开浏览器，在地址栏输入你的放置个人网站的仓库路径，即 用户名.github.io还可以绑定自有域名

END

Copyright © 2013 - 2020 Sancx All Rights Reserved.

访客数 : | 访问量 :