【Hexo】+【Github】搭建blog

309 阅读3分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

1.下载安装Git

1.Git官网下载界面

2.安装界面

  2.1 个人选择全选

  2.2 勾选:Use Git from the Windows Command Prompt

2.下载安装node.js

1.Node.js官网下载界面

  ps:文章发布日期最新版本为16.13.0

2.安装界面

  一路默认即可

在这里插入图片描述

3.安装hexo

1.npm安装hexo

  1.1 任意位置Git Bush Here

  1.2 npm install -g hexo

这里以前不会安装及卸载

手动删除:C:\用户\WJW\AppData\npm下的文件删除(我用npm没有安装过其他东西)

在这里插入图片描述

emm...下面在本地查看时还是出了点错误,强制删除并重装

在这里插入图片描述

在这里插入图片描述

emm...在报错对应目录下npm install

在这里插入图片描述 emm...在home下能够查看版本

在这里插入图片描述

emm...貌似与版本没有问题

在这里插入图片描述

emm...试着换源安装

npm config set registry http://registry.npm.taobao.org/

npm install hexo-cli -g

在这里插入图片描述

emm...我还是看一看报的错是什么意思吧(以前不爱读报错的习惯真不好)

4.初始化Hexo

1.创建文件夹

  D:\Hexo

2.hexo init

D:\Hexo下右键Git Bush Here
$hexo init

这里要稍等一会,我手动把GitHub上地项目down下来解压的

在这里插入图片描述

3._config.yml基础配置

在这里插入图片描述

4.本地浏览blog

4.1 hexo g

在这里插入图片描述

ps:上面好像没有全局安装成功hexo,但是偶然能够运行hexo g

不过还是有错:输入:hexo -v仍显示这个界面

...配置文件里面少了一个空格

补上以后报错:

YAMLException: duplicated mapping key (101:1)

...第101行的内容与上面重复,注释掉即可

ps:在目标文件夹下hexo -v终于可以了

在这里插入图片描述

4.2 hexo s

允许访问

浏览器访问:localhost:4000

在这里插入图片描述

在这里插入图片描述

emm...针不戳呀,不过我为什么是在Ctrl+C后才能访问?直接访问时间久而且加载不了图片? (后面重启shell后运行hexo s 后可以直接本地访问了)

5.写blog

在D:\Hexo\source_posts文件下,新建.md文件就可以写文章

在这里插入图片描述

在这里插入图片描述

emm...针不戳呀

5.部署到Github上

1.Github账号

  略

2.new repository

  这里我先使用2021.04.02创建好的仓库试一试

在这里插入图片描述

3._config.yml配置

在这里插入图片描述

4.安装hexo-deployer-git自动部署发布工具

在Hexo文件夹下 Git Bash Here
npm install hexo-deployer-git  --save

在这里插入图片描述

emm...对Git不熟悉好难受

这里使用淘宝源安装一下cnpm试一试

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

在这里插入图片描述

在这里插入图片描述

emm...应该没有什么问题了吧

5.发布到Github

hexo clean && hexo g && hexo d

在这里插入图片描述

不对不对,这是我0402创建好的。

中午吃饭时想到可能是配置文件中的仓库地址写错了,这里检查一下没有写错。

还有个可能是没有设置master

下面新建一个博客并上传试试

(这种每次都clear+g+d的方式好像很笨,下面设置SSH试试)

ps:第一次发布需要验证github账号

6.测试访问

在浏览器输入:guairen-7.github.io/

6.设置SSH(在Hexo配置前)

这里以前建立过,删除重新create SSH

1.打开 git bash;

2.输入 ssh-keygen -t rsa -C "邮箱",其中邮箱中填写注册 git 时所使用的邮箱;

在这里插入图片描述

ps:这里我没有设置passphrase

3.打开 Github 设置,进入 SSH and GPG keys 页面,填写信息,其中 Title 为自定义 key 的名称,key 为 电脑中的密钥,具体位置在 C:/Users/Administrator/.ssh/id_rsa.pub 中,将复制粘贴即可。

在这里插入图片描述

在这里插入图片描述

emm...跟不一致好像没有关系

这里想到配置文件中的URL没有配置

7.URL配置

在这里插入图片描述

8.页面不匹配解决

原来是hexo d没有部署成功,这一步等了一会呢

在这里插入图片描述

emm...是因为以前在哪里设置本地端口为5000么?这一项在哪里更改?

在这里插入图片描述

这里展开查看的是2021.10.30,更确定了部署错误,接下来查查看

1.检查ssh:

在这里插入图片描述

很好!没有问题

2.初始化本地git仓库

在这里插入图片描述

3.部署

在这里插入图片描述

很好!hexo clean与hexo g没有问题

部署还是有问题

下面把旧仓库删除并新建仓库后:

在这里插入图片描述

(这里后来发现没有设置SSH)

不对不对,SSH与创建仓库没有关系

测试时偶然发现与GitHub断开连接了

不对不对,有个博主说这样是连接成功

在这里插入图片描述

接着执行

hexo config deploy.repository git@github.com:[yourgitname]/[yourgitname].github.io.git

在这里插入图片描述

在这里插入图片描述

偶然发现这里配置错误:

在这里插入图片描述 修改为:

在这里插入图片描述

hexo d:

在这里插入图片描述 激动:还是配置文件写错了

在这里插入图片描述

在这里插入图片描述

hexo clean

hexo g

hexo d

在这里插入图片描述

然后看了一眼GitHub感觉有戏

在这里插入图片描述

有些激动,虽然我的思路没有那么清楚,还有很多笨方法

在这里插入图片描述

在这里插入图片描述

9.Hexo命令

$ hexo clean //清除缓存文件db.json和已生成的静态文件public

$ hexo g //生成网站静态文件到默认设置的public文件夹

$ hexo d //部署网站到设定的仓库

1、hexo init

hexo init 命令用于初始化本地文件夹为网站的根目录

hexo init [folder]

folder 可选参数,用以指定初始化目录的路径,若无指定则默认为当前目录

2、hexo new

hexo new 命令用于新建文章,一般可以简写为 hexo n

hexo new [layout] <title>

layout 可选参数,用以指定文章类型,若无指定则默认由配置文件中的 default_layout 选项决定 title 必填参数,用以指定文章标题,如果参数值中含有空格,则需要使用双引号包围

3、hexo generate

hexo generate 命令用于生成静态文件,一般可以简写为 hexo g

hexo generate

-d 选项,指定生成后部署,与 hexo d -g 等价

详细信息请参考:hexo.io/docs/genera…

4、hexo server

hexo server 命令用于启动本地服务器,一般可以简写为 hexo s

hexo server

-p 选项,指定服务器端口,默认为 4000

-i 选项,指定服务器 IP 地址,默认为 0.0.0.0

-s 选项,静态模式 ,仅提供 public 文件夹中的文件并禁用文件监视

说明 :运行服务器前需要安装 hexo-server 插件

npm install hexo-server --save

详细信息请参考:hexo.io/docs/server…

5、hexo deploy

hexo deploy 命令用于部署网站,一般可以简写为 hexo d

hexo deploy

-g 选项,指定生成后部署,与 hexo g -d 等价

说明 :部署前需要修改 _config.yml 配置文件,下面以 git 为例进行说明

deploy: type: git repo: <repository url> branch: master message: 自定义提交消息,默认为Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}

详细信息请参考:hexo.io/docs/deploy…

6、hexo clean

hexo clean 命令用于清理缓存文件,是一个比较常用的命令

hexo clean

网站显示异常时可尝试此操作

7、Option

(1)hexo --safe

hexo --safe 表示安全模式,用于禁用加载插件和脚本

hexo --safe

安装新插件时遇到问题可尝试此操作

(2)hexo --debug

hexo --debug 表示调试模式,用于将消息详细记录到终端和 debug.log 文件

hexo --debug

(3)hexo --silent

hexo --silent 表示静默模式,用于静默输出到终端

hexo --silent