使用 Hexo + Next 搭建静态博客
欢迎移步我的博客阅读:《使用 Hexo + Next 搭建静态博客》
前言
Github 为广大开发者提供了一个非常好的平台,不仅是代码的开源,同时Github还提供了开发者可以在 Github 上建立自己的站点(GithubPage)的一个非常有意思的功能。这个功能的局限是只能创建静态的网站,那么我们可以使用一些工具来快速创建这一网站。
本文旨在帮助刚接触 Github 新手,想利用 Github 来创建自己的站点、个人博客等。大神可以忽视__(:з」∠)__。
准备
你需要在 Github 上创建一个属于自己的账户,然后新建一个仓库(new repository
),并命名为 YourSiteName.github.io/com
,此时 Github 会帮助你初始化一个静态网页,你可以根据自己的喜好选择一些模版(这都不是重点),接着尝试访问下你所建的站点,成功后就可以开始动工了。
关于 Hexo
A fast, simple & powerful blog framework
快速,简单而高效的静态博客框架
超快速度: Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。
支持 Markdown: Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
一键部署: 只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。
丰富的插件: Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。
关于 NexT
NexT is built for easily use with elegant appearance. First things first, always keep things simple
NexT 主旨在于简洁优雅且易于使用,所以首先要尽量确保 NexT 的简洁易用性。
这是一个扩展主题,由 iissnan开发,精于心,简于形
的理念。
正题
上面是对搭建博客的一些技术了解,接下来进入正题。
Hexo 初始化博客框架
1. 安装 Hexo
Hexo 安装和搭建依赖 Nodejs 和 Git,可自行下载。
$ npm install -g hexo-cli
2. 初始化框架
$ hexo init <yourFolder>
$ cd <yourFolder>
$ npm install
初始化完成大概的目录:
.
├── _config.yml //网站的 配置 信息,您可以在此配置大部分的参数。
├── package.json
├── scaffolds //模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
├── source //资源文件夹是存放用户资源的地方。
| ├── _drafts
| └── _posts
└── themes //主题 文件夹。Hexo 会根据主题来生成静态页面。
3. 新建文章(创建一个Hello World)
$ hexo new "Hello World"
在 /source/_post
里添加 hello-world.md
文件,之后新建的文章都将存放在此目录下。
4. 生成网站
$ hexo generate
此时会将 /source
的 .md
文件生成到 /public
中,形成网站的静态文件。
5. 服务器
$ hexo server -p 3000
输入 http://localhost:3000
即可查看网站。
6. 部署网站
$ hexo deploy
部署网站之前需要生成静态文件,即可以用 $ hexo generate -d
直接生成并部署。此时需要在 _config.yml
中配置你所要部署的站点:
## Docs: http://hexo.io/docs/deployment.htmldeploy:type: gitrepo: git@github.com:YourRepository.gitbranch: master
7. 更多
[[Hexo官网]](https://hexo.io/zh-cn/)
配置相关 - [[Hexo | 配置]](https://hexo.io/zh-cn/docs/co...
更多的命令 - [[Hexo | 指令]](https://hexo.io/zh-cn/docs/co...
那么到此为止网站的雏形算是完成了,接下来你就要自己去管理和完善个人网站了。
使用 NexT 主题让站点更酷炫
1. 使用
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
从 NexT 的 Gihub
仓库中获取最新版本。
2. 启用
需要修改 /root/_config.yml
配置项 theme
:
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next
3. 验证是否启用
$ hexo s --debug
访问 http://localhost:4000
,确保站点正确运行。(此命令可以做平时预览用)
4. 更多
NexT官网 - [[NexT]](http://theme-next.iissnan.com/)
主题设定 - [[Next | 主题设定]](http://theme-next.iissnan.com...
第三方服务 - [[Next | 第三方服务]](http://theme-next.iissnan.com...
启用 Next
主题成功,那么你的网站变得酷炫(简约)。
最后
我的博客
Next官方实例
有任何疑问和建议可以留言,将在第一时间为你解答
使用 Hexo + Next 搭建静态博客相关推荐
- [Hexo]Hexo+github搭建静态博客
1.简介 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章(经常玩CSDN上的人都知道),在几秒内,即可利用靓丽的主题生成静态网页.通过Hexo我 ...
- hexo+gayhub搭建静态博客
按个人记忆和别人的经验写的. 工具准备: 1.gayhub账户和客户端 2.node.js 3.hexo 工具的安装以及基本使用就不普及了,最多说下几个命令 首先创建库 必须接github.io 在刚 ...
- 使用github+hexo搭建静态博客
npm install hexo -g #安装Hexo npm update hexo -g #升级 hexo init #初始化博客 命令简写 hexo n "我的博客" == ...
- Hexo结合Stun静态博客搭建从入门到入土
摘要 安装npm,安装hexo相关依赖,安装主题stun 修改hexo配置,修改stun配置,部署到github,gitee实现静态访问 给博客加上全局搜索,访问量统计 hexo博客编写模板 tips ...
- Hexo+github搭建个人博客-博客发布篇
通过 Hexo+github搭建个人博客-环境搭建篇 以及 Hexo+github搭建个人博客-博客初始化篇 ,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如何把我们的 ...
- Hexo+github搭建个人博客-博客初始化篇
文章推荐 精选java等全套学习资源 精选java电子图书资源 精选大数据学习资源 java项目练习精选 上一篇博文 [<Hexo+github搭建个人博客-环境搭建篇>](http:// ...
- Hexo+github搭建个人博客-环境搭建篇
一.概述 我们使用Hexo + Github搭建个人博客,我们自然不能错过,事不宜迟,我们现在立马来认识一下,他们究竟是何方神圣吧. 1.1 关于 GitHub 1.1.1 Github 接触编程一段 ...
- vsphere通用配置_Mac环境下如何用Hexo+Github搭建个人博客
一个爱折腾的人,总是忍不住去自己动手尝试新鲜事物.就拿写博客来说,虽然网上已经提供了很多博客平台,但是总有一些个性化的需要得不到满足.所以就抽空去网上找了下如何使用Hexo+Github 搭建自己博客 ...
- hexo评论_【前端简历加分】hexo框架搭建个人博客站点,手把手教学
最近,粉丝们在金九银十期间也是不断的面试,有比较多的毕业生说我在这个期间出多一些面试题,上几期都是倾向于面试文章,这期出一次简历加分项操作,使用hexo框架搭建个人博客. 作为应届毕业生或者1-3年工 ...
最新文章
- Go 学习笔记(23)— 并发(02)[竞争,锁资源,原子函数sync/atomic、互斥锁sync.Mutex]
- 如何利用ArcGis修改shp数据字段名称
- Android Service(7)--完结篇
- python 多进程 multiprocessing 进程池pool报错 in join assert self._state in (CLOSE, TERMINATE) AssertionError
- MySQL索引背后的数据结构及算法原理zz
- jquery.lazyload.js详解
- feeder link
- Logan:美团点评的开源移动端基础日志库
- 视觉SLAM——英特尔D435i相机内参矩阵标定
- 分页组件change_javascript原生瀑布流+图片懒加载组件
- 马尔科夫决策过程(MDP) : BlackJack (MC-On Policy)
- 解决无法使用miracast,导致手机无法投屏到电脑的问题
- linux PMBus总线及设备驱动分析
- typra + picgo + 腾讯云 配合使用编辑微信公众号内容
- RN react-native-wechar 微信支付、分享
- 腾讯抄袭之史 当之无愧的剽窃之王【最近剽窃 qq空间时间轴 VS 钥匙网】
- 从日志统计到大数据分析
- mac之间快速传递文件-from-jianshu-狂奔的胖蜗牛
- python源代码制作星空_用python画星空源代码是什么?
- 磁带备份迁移到磁盘备份前的准备工作