搭建Hexo博客详细教程
欢迎来到我的博客!这是我用hexo建立的第一个博客静态网页,部署在github上的,因此难免会有些许不尽人意的地方,但我会努力改善的,我会分享一些我平时所学的知识与经验,也分享一些我遇到过的技术错误。
搭建hexo博客经验分享
前言:
这就相当是制作一个静态网页,但是不用自掏资本,但只能是轻量的网页,因此非常适合博客的搭建,本网页界面就是用hexo制作的,也许不足以激发你的兴趣,但是它也可以用来分享你的生活的点点滴滴,只要你有一颗好奇的心,以及敢于去尝试的勇气,搞定博客不在话下。
1.安装Git以及连接GitHub
2.安装Node.js
3.安装Hexo
- 首先创建一个文件夹,命名(感觉最好全是英文),进入文件夹后,按住shift键同时右键鼠标,点击
在此处打开PowerShell窗口(s)
,使用npm命令安装hexo,npm install -g hexo-cli
,安装完后输入hexo -v
来验证是否安装成功,若显示既不是外部也不是内部命令,则请参考文章:安装Node.js ,若提示这是非签名脚本,已被系统拒绝执行,请参考以下步骤(没有则请忽略😂):- win10下关闭脚本执行安全策略
点击开始,设置,搜索power,点击powershell developer settings,往下拉,找到应用以下设置已执行powershell脚本,勾选,点击应用就可以了
- win10下关闭脚本执行安全策略
- hexo -v正确显示之后就开始初始化网址,输入
hexo init
- 接着输入npm install来安装这个网址需要的插件
npm install
- 完成后,输入hexo g来生成静态网页
hexo g
- 结果显示:
- hexo s开启本地服务器
hexo s
- 结果显示: 这就代表启动成功了。
- 可在浏览器输入网址http://localhost:4000就可以查看了,关闭本地服务可直接ctrl+c
4.写作
注意:请求地址url中的文件名不能有空格(文档中的标题没有影响),文件名可以用
-
隔开,否则会出问题。
执行下列命令来创建一篇新文章或者新的页面
hexo new [layout] <title>
可以在命令中指定文章的布局(layout),默认为post
,可以通过修改_config.yml
中的default_layout
参数来指定默认布局。
- 新建页面:
hexo new page <title>
- 新建文章:
hexo new <title>
orhexo new post <title>
layout
Hexo默认有三种布局:post
、page
和draft
。在创建三种不同类型的文件时,它们将会被保存到不同的路径,而我们自定义的其它布局和post
相同,都将储存到source/_posts
文件夹。
layout | 路径 |
---|---|
post | source/_posts |
page | source |
draft | source/_drafts |
文件名称
Hexo默认以标题作为文件名称,但可以编辑new_post_name
参数来改变默认的文件名称,举例来说,设为:year-:month-:day&:title.md
可以让我们更方便的通过日期来管理文章。
变量 | 描述 |
---|---|
:title | 标题(小写,空格将会被替换为短杠) |
:year | 建立的年份,如2015 |
:month | 建立的月份(有前导零),如04 |
:i_month | 建立的月份(无导零),如4 |
:day | 建立的日期(有前导零),如07 |
:i_day | 建立的日期(无前导零),如7 |
草稿
Hexo的一种特殊布局:draft
,这种布局在建立时会被保存到source/_drafts
文件夹,可以通过publish
命令将草稿移动到source/_posts
文件夹,该命令的使用方式与new
十分类似,可以在命令中指定layout
来指定布局。
hexo publish [layout] <title>
草稿默认不会显示在页面中,可以在执行时加上--draft
参数,或是把render_drafts
参数设为true
来预览草稿。
模板(Scaffold)
在新建文章时,Hexo会根据scaffolds
文件夹中寻找photo.md
,并根据其内容建立文章,以下是我们可以在模板中使用的变量:
变量 | 描述 |
---|---|
layout | 布局 |
title | 标题 |
date | 文件建立日期 |
5.参考文章
6.后续美化
我正在学习,慢慢添加吧,网上有很多教程供参考,我这里也有文章专门介绍博客主题的美化,方向门。
安装过程中出现的问题
- 连接GitHub和上传博客到GitHub出现问题,建议搭梯子,科学上网。
- node.js和安装hexo中遇到的问题可以参考文章安装Node.js.
其它个人博客搭建框架
hexo:https://hexo.io.
jekyll:https://jekyllrb.com.
hugo: https://www.gohugo.org.
vuepress:https://vuepress.vuejs.org.
solo:https://solo.b3log.org.
wordpress:https://wordpress.org.
typecho:https://typecho.org.
参考文章:《个人博客搭建——介绍几种博客搭建框架》.