Hexo搭建自己的博客

最新推荐文章于 2025-02-09 22:28:20 发布

原创最新推荐文章于 2025-02-09 22:28:20 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#hexo

什么是 Hexo？

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

工具准备（mac）

Node.js (Should be at least nodejs 6.9)

1.安装hexo

$ npm install -g hexo-cli

如果安装不成功

2.创建一个文件夹用于初始化hexo

mkdir /blog
cd /blog
hexo init
npm install

新建完成后，指定文件夹的目录如下：

├── _config.yml
├── package.json
├── scaffolds
├── source
   ├── _drafts
   └── _posts
└── themes


node_modules  npm 文件缓存目录
scaffolds     文夹件下存放的是文章、页面模版
scource       文夹件下存放的是我们的资源文件
themes        文件下存放的是我们的主题文件
.gitignore    git 忽略文件，设置提交文件时，哪些文件不提交
_config.yml   站点配置文件
package.json  站点版本，站点依赖文件
yarn.lock     yarn.lock 文件由 Yarn 自动创建，并且完全通过 Yarn 进行操作。

3.生成静态文件。

hexo generate（hexo g）

4.启动

hexo server（hexo s） 
hexo s -p 5000  指定端口

默认端口4000，好的这个时候让我们来看看效果
访问地址：http://localhost:4000

嗯…丑哭

至此搭建的步骤已经完成了，后面找个好看的主题美化一下

hexo 常用命令

$ hexo generate (hexo g) 生成静态文件
$ hexo server (hexo s) 启动本地服务
$ hexo deploy (hexo d) 提交到远程仓库
$ hexo new page "xx"(hexo n page) 创建页面 
$ hexo new "xx" (hexo n "") 创建文章
$ hexo d -g 生成静态并提交到远程仓库
$ hexo s -g 生成静态文件并启动本地预览
$ hexo clean 清除本地 public 文件

Hexo主题

找到你喜欢的主题

打开的是一个github的地址，把这个下载到/blog 下面的themes文件夹里

 git clone ....

然后修改/blog下面的_config.yml,修改主题为下载的文件夹名

theme: hexo-theme-typescript

然后还需要下载一下依赖,挨个安装哦

npm install xxx

安装好了以后hexo s启动

哇哦～

Hexo文章编写

安装admin插件

 npm install --save hexo-admin

再次启动项目

访问：http://localhost:4000/admin

1.先新建一个文章

hexo new a (a是你的文章文件名)

然后刷新admin页面，点进去编辑就可以了，图片直接粘贴也没问题的

Hexo github 博客

1.安装插件

$ npm install hexo-deployer-git --save

在你的github新建公开仓库，名称为：你的登录名.github.io(必须)

新建之后复制地址，记得要复制ssh的地址，不要https的

2.修改配置_config.yml

deploy:
  type: git
  repo: 你自己的项目地址
  branch: master

3.将目录下面的public文件夹提交到git

hexo d

4.大功告成

Hexo 添加评论

leancloud

先去注册个号，然后创建应用，在设置里复制Appid和Appkey

修改theme文件下你下载的主题的配置

valine:
  enable: true # !!if you want use valine comment system,please set enable: true
  appId: 你的appid
  appKey: 你的appKey
  guest_info: nick,mail,link #valine comment header info
  placeholder: 说点啥在走啊 # valine comment input placeholder(like: Please leave your footprints )
  avatar: mm # gravatar style https://valine.js.org/avatar
  pageSize: 10 # comment list page size
  verify: false # valine verify code (true/false)
  notify: false # valine mail notify (true/false)
  lang: zh-cn

看效果！！！