您的当前位置:首页使用Hexo + Next搭建静态博客

使用Hexo + Next搭建静态博客

2024-12-13 来源:哗拓教育

前言

准备

关于Hexo

  • A fast, simple & powerful blog framework
  • 快速,简单而高效的静态博客框架
  • 超快速度: Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。
  • 支持 Markdown: Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  • 一键部署: 只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。
  • 丰富的插件: Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。

关于Next

Theme-Next
  • NexT is built for easily use with elegant appearance. First things first, always keep things simple
  • NexT 主旨在于简洁优雅且易于使用,所以首先要尽量确保 NexT 的简洁易用性。

正题

上面是对搭建博客的一些技术了解,接下来进入正题。

Hexo初始化博客框架

  1. 安装Hexo
    Hexo安装和搭建依赖和,可自行下载。
$ npm install -g hexo-cli
  1. 初始化框架
$ hexo init <yourFolder>
$ cd <yourFolder>
$ npm install

初始化完成大概的目录:

.
├── _config.yml //网站的 配置 信息,您可以在此配置大部分的参数。
├── package.json
├── scaffolds   //模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
├── source  //资源文件夹是存放用户资源的地方。
|   ├── _drafts
|   └── _posts
└── themes  //主题 文件夹。Hexo 会根据主题来生成静态页面。
  1. 新建文章(创建一个Hello World)
$ hexo new "Hello World"

/source/_post里添加hello-world.md文件,之后新建的文章都将存放在此目录下。

  1. 生成网站
$ hexo generate

此时会将/source.md文件生成到/public中,形成网站的静态文件。

  1. 服务器
$ hexo server -p 3000
  1. 部署网站
$ hexo deploy

部署网站之前需要生成静态文件,即可以用$ hexo generate -d直接生成并部署。此时需要在_config.yml中配置你所要部署的站点:

## Docs: http://hexo.io/docs/deployment.html
   deploy:
     type: git
     repo: 
     branch: master
  1. 更多
  • 官网
  • 配置相关
  • 更多的命令

那么到此为止网站的雏形算是完成了,接下来你就要自己去管理和完善个人网站了。

使用Next主题让站点更酷炫

  1. 使用
$ cd your-hexo-site
$ git clone  themes/next

从Next的Gihub仓库中获取最新版本。

  1. 启用
    需要修改/root/_config.yml配置项theme
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next
  1. 验证是否启用
$ hexo s --debug
  1. 更多
  • Next官网
  • 主题设定
  • 第三方服务

启用Next主题成功,那么你的网站变得酷炫。(简约)

最后

** 有任何疑问和建议可以留言,将在第一时间为你解答 **

显示全文