搭建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脚本,勾选,点击应用就可以了
  • 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> or hexo new post <title>

layout

Hexo默认有三种布局:postpagedraft。在创建三种不同类型的文件时,它们将会被保存到不同的路径,而我们自定义的其它布局和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.参考文章

Hexo博客 搭建超详细教程.

Hexo 搭建个人博客网站.

6.后续美化

我正在学习,慢慢添加吧,网上有很多教程供参考,我这里也有文章专门介绍博客主题的美化,方向门

安装过程中出现的问题

  1. 连接GitHub和上传博客到GitHub出现问题,建议搭梯子,科学上网。
  2. node.js和安装hexo中遇到的问题可以参考文章安装Node.js.

其它个人博客搭建框架

hexohttps://hexo.io.

jekyllhttps://jekyllrb.com.

hugo: https://www.gohugo.org.

vuepresshttps://vuepress.vuejs.org.

solohttps://solo.b3log.org.

wordpresshttps://wordpress.org.

typechohttps://typecho.org.

参考文章:《个人博客搭建——介绍几种博客搭建框架》.