使用Hexo搭建个人博客01 -- 基础建站篇

时间:2019-08-25
本文章向大家介绍使用Hexo搭建个人博客01 -- 基础建站篇,主要包括使用Hexo搭建个人博客01 -- 基础建站篇使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

原文引用https://www.dazhuanlan.com/2019/08/25/5d625ae568844/


具体安装方法自行google啦~

开始使用

安装 yarn

cmd 下输入

1
 npm install -g  yarn

-g 表示全局安装 将插件加入系统环境变量中 使 cmd 可以在任意目录下使用 yarn 命令

安装 Hexo

1
$ yarn add  hexo

初始化Hexo

安装 Hexo 完成后,执行下列命令,Hexo 将会在您指定文档夹中新建所需要的文档。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ yarn

执行完毕后,你的项目会生成以下目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
├── node_modules //依赖安装目录
├── scaffolds //模板文档夹,新建的文章将会从此目录下的文档中继承格式
| ├── draft.md //草稿模板
| ├── page.md //页面模板
| └── post.md //文章模板
├── source //资源文档夹,用于放置图片、数据、文章等资源
| └── _posts //文章目录
├── themes //主题文档夹
| └── landscape //默认主题
├── .gitignore //指定不纳入git版本控制的文档
├── _config.yml //站点配置文档
├── db.json
├── package.json
└── yarn-lock.json

到这里你就完成了所有的准备工作,只需一条命令即可启动你的博客

本地预览Hexo

项目目录下依次输入

1
2
3
$ hexo cl       
$ hexo g
$ hexo s # 启动本地预览服务器 默认端口4000

成功后,访问 http://localhost:4000/ 启动你的预览

如果端口被占用想自定义一个新端口 再或者想启动Debug模式怎么办?
hexo s启动命令也有附加参数
–p [端口号] 修改端口号
–debug 开启debug模式

1
$ hexo s  --p  [端口号]   --debug

部署Hexo

我们写 blog 更多还是想一起分享的,本地自嗨怎么能行,肯定要部署到服务器上啦~ 目前有2种方式可以部署我们的博客

  • 使用 github 或 coding 的 pages 服务
  • 部署在自己的VPS上

    github部署

打开 github ,新建一个 repository
Repository name 一定要为 [你的用户名].github.io
将你的本地公钥绑定在github上,如果尚未生成 ssh 公钥对,执行如下命令生成新的公钥对:

1
$ ssh-keygen

如果是 Windows 操作系统,
此时会在 C:UsersUsername.ssh 目录下生成密钥文档 id_rsa 和公钥文档 id_rsa.pub。

在 github 右上角头像点击 settings / SSH and GPG keys ,
新建一个 SSH key ,将你id_rsa.pub 文档中的内容复制到 key中

在站点配置文档 _config.yml 中设置

_config.yml
1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: [你的github仓库地址]
branch: master

安装Hexo部署插件

1
$ yarn  add  hexo-deployer-git

在当前目录下打开 cmd输入以下命令 开始部署

1
2
3
$ hexo cl
$ hexo g
$ hexo d

访问 [你的github项目名].github.io 查看是否部署成功

每次启动或者部署输入三个命令很麻烦,可以把这三个命令写入到 package.json

1
2
3
4
"scripts": {
"deploy": "hexo clean && hexo g -d",
"start": "hexo clean && hexo g && hexo s --debug",
}

以后只需输入 yarn start ( 启动预览 ) yarn deploy ( 部署 )

VPS部署

考虑考虑

解开了揭开

原文地址:https://www.cnblogs.com/petewell/p/11408857.html