github船舰新文件夹_Mac端使用Hexo + GitHub搭建博客

最新推荐文章于 2022-03-15 18:37:10 发布

SME情报员

最新推荐文章于 2022-03-15 18:37:10 发布

阅读量74

点赞数

文章标签： github船舰新文件夹

本文链接：https://blog.csdn.net/weixin_29066781/article/details/112538402

版权

之前有用Django搭建博客的一个教程系列，今天再发一个 Hexo + GitHub 的简单版本。虽然网上已经有了很多类似教程，但是能让非技术人员跟着做下来的很少，所以还是整理下。

Hexo 的官网介绍：

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

接下来开始开始一步步说明。

GitHub 账号注册及仓库创建

如果还没有 GitHub 账号，那么需要先创建 GitHub 账号(因为网页和博客数据是托管在 GitHub 上)。进入 GitHub官网，注册账号成功后，创建一个新的仓库。创建仓库的名字必须为 username.github.io，这里的 username 就是注册 GitHub 时的用户名，需要一致。如果不一致，后续会显示 404。

image-20201215211152340
创建页面不需要选择太多内容。仓库选择公开就行。

安装node.js

首先检查是否安装了node.js

node -v # 是否出现安装版本信息，出现说明已经安装了

如果未安装，去Node.js官网下载相应的安装包，安装就行。

#安装完成之后打开终端，分别输入一下命令，如果出现版本信息，就说明安装成功。
node-v   
npm -v

安装 Git

安装 Git 主要是因为需要提交代码到 GitHub。Mac 下安装Xcode就自带Git。

首先检查是否安装了 Git

git --version # 是否出现安装版本信息，出现说明已经安装了

未安装通过 Homebrew(安装Homebrew这里就不写了，有官网说明可以查看) 安装 Git，终端命令输入：
```
brew install git
```

配置SSH Key

配置 SSH Key 主要是为了方便本地博客文件上传到 GitHub。配置教程说明。

安装Hexo

安装 Hexo。接下来只需要使用 npm 即可完成 Hexo 的安装。如果可以的话，建议先去 Hexo 官网了解下相关命令。
```
npm install -g hexo-cli
```
如果有报错信息，比如

Error: EACCES: permission denied, access '/usr/local/lib/node_modules

原因: 执行命令行时没有获得管理员权限解决方案：在命令行前面添加 sudo 获取管理员权限，输入管理员密码就行例如原来的是: npm install -g hexo-cli应该改为：sudo npm install -g hexo-cli

再输入密码就行。如果没有提示权限报错信息，则继续。

创建博客目录。在任意位置创建一个文件夹，如 MyBlog，cd 到该路径下。
```
# 在你选择的目录下创建一个MyBlog文件夹
mkdir MyBlog
# 进入目录
cd MyBlog
```
初始化目录，在 MyBlog 目录下
```
hexo init
```

启动本地服务

hexo s

INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

如果出现以上信息说明成功，浏览器输入http://localhost:4000/ 就可以访问了。

博客关联到 GitHub 仓库

博客文件夹MyBlog中的_config.yml文件，这是博客的主要配置文件。

编辑博客配置文件_config.yml中的deploy节点。记得将username换成自己的username
```
deploy:
  type: git
  repo: git@github.com:username/username.github.io.git
  branch: master
```
注意：repo为这种形式的是配置了SSH Key之后的，如果没有配置则使用Https形式的地址。下图是地址位置。
为了能够使Hexo部署到GitHub上，需要安装一个插件，在博客目录下运行以下命令
```
npm install hexo-deployer-git --save
```
然后在博客目录中执行
```
#清除缓存
hexo clean
# 产生静态网页
hexo g
# 部署到GitHub page上
hexo d
```
在浏览器输入username.github.io就可以访问你的博客了

博客操作方式

创建新文章，博客目录下执行以下命令

hexo new '文章标题'

或者不想用命令行的话，直接去 source > _posts 文件夹下，新建博客md文档就行。博客其他的分类创建、标签创建这些博客操作，都可以看 Hexo官网。有详细说明。

编辑完成之后本地地址预览，在博客目录下运行以下命令
```
hexo clean && hexo g && hexo s
```
预览没问题后，完成之后上传Github，在博客目录下运行以下命令

hexo clean && hexo g && hexo d

博客的主题选择

博客的主题选择，可以直接去 Hexo官网查看，对于没有技术前端基础的同学，建议选择使用人数较多，文档详细的主题。因为一些较偏的主题文档不全，报错了会很麻烦。有些即使按照教程一步步操作，也有肯能因为 Hexo 的版本等各种原因而出现各类报错。我观察了下，Next主题维护和使用的人比较多，可以选择使用看看。

绑定个人域名

如果还想拥有个人博客域名，可以继续往下设置。在国内可以直接去万网买。进入万网/控制台/云解析DNS/域名解析/解析设置

获取 GitHub 的二级域名 IP 地址

ping username.github.io
#例如：ping zhangsan.github.io

在万网解析域名如下设置

在 hexo 项目下，source 文件夹下面创建 CNAME 文件(没有后缀名的)，在里面写上购买的域名。比如：
在GitHub上面，打开username.github.io项目的(Settings)设置，然后在 GitHub Pages的 Custom domain设置里填上购买的域名。比如：