用Hexo制作自己的静态博客
博客是一个老东西了,如果我们想写博客的话,有两种选择,第一种是在博客网站上,例如QQ空间、新浪博客、简书等网站上申请账号,然后编写博客;第二种就是自己找服务器搭一个博客。搭建博客也有两种选择,第一种是搭建动态博客,这方面最流行的就是WordPress,第二种就是搭建静态博客,这方面有很多选择。说到功能上,动态博客当然更胜一筹,但是所需的服务器资源比较大,如果想取得较好的效果,就必须花钱购买服务器资源。静态博客功能比较单一,但是由于省资源,所以可以找到很多免费部署的资源(例如Github Pages)。
搭建静态博客这方面有很多工具可供选择,我看了看Hexo是一个很不错的选择,使用人数比较多,功能也挺丰富,所以这里我就选择Hexo来搭建静态博客。这篇文章在很多地方也参考了Hexo 官方文档。
安装Hexo
在安装Hexo之前,首先需要安装Node.js和Git两个工具。
然后输入下面命令来安装Hexo。
$ npm install -g hexo-cli
建立博客
安装好Hexo之后,就可以建立博客了。建立博客需要输入以下命令。
$ hexo init <folder>
$ cd <folder>
$ npm install
等待npm安装好所有依赖包之后,博客就算建立好了。博客的文件结构如下面所示。
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
配置博客
在项目外层文件夹中有一个_config.yml
,这是博客项目的全局配置文件,在这里有很多选项需要我们修改。例如博客主标题、子标题、描述、作者、语言、时区、博客地址和根地址等等。这里列举的这些地址都需要我们根据自己需求进行修改。
title: 易天的静态个人博客
subtitle:
description:
author: 易天
language: zh-CN
timezone: Asia/Shanghai# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
Hexo命令
下面介绍一下Hexo的常用命令,方括号[]
中包括的是可选项,尖括号<>
中包括的是必选项。
创建新博客项目
如果未指定文件夹,hexo会在当前文件夹创建项目文件。
$ hexo init [folder]
创建新文章
如果未指定布局,会使用配置文件中的默认布局选项。如果文章标题中含有空格等字符,需要使用双引号包括标题。
$ hexo new [layout] <title>
生成静态博客
该命令会生成博客的静态文件。
$ hexo generate
启动本地服务器
启动本地服务器来开发博客,默认地址为 http://localhost:4000/ 。
$ hexo server
还有一些命令这里就不介绍了,需要详细了解的话可以直接查看官方文档。
编写新文章
编写新文章使用下面的命令。
$ hexo new [layout] <title>
默认情况下布局有post
、page
、draft
三个,它们所在的文件夹位置也不同。默认使用post
布局,生成的文章会放在source/_posts
下。执行完这个命令之后,在该文件夹会出现名为<title>.md
的markdown格式文件,这就是我们的博客文件,我们可以按照markdown语法来编辑它。
项目中还有一个名为scaffolds
的文件夹,里面存放的不同布局的模板。我希望所有文章都有分类属性,所以需要在post.md
中添加categories:
一行。这里在---
之间包括的代码是文章的属性,将会由Hexo渲染为实际的样式。我们的博客文章需要写在这一部分的后面。
---
title: {{ title }}
date: {{ date }}
tags:
categories:
---
这里我写了一篇小文章,介绍了一点经验。
---
title: 在客户端上登录微软邮箱时提示您输出的用户名或密码不起作用的解决办法
date: 2017-11-13 18:42:56
tags:- 疑难杂症- 电子邮箱
categories:
- 疑难杂症
---有些同学可能会在用微软邮箱登录outlook或者其他邮箱客户端的时候,明明输入的是正确的用户名和密码,但是却提示“您输入的用户名或密码不起作用”。其实原因很简单,这是因为你的微软账号开启了二次验证,而邮箱客户端并不支持这个功能。当然解决办法也很简单,登录[微软账户更多安全选项](https://account.live.com/proofs/Manage/additional)中,然后找到应用密码这个,将应用密码作为邮箱密码输入到邮箱客户端中即可解决问题。当然对于Xbox等无法登陆的问题,也可以使用这个方法来解决。
写完之后,使用下面的命令启动本地服务器,然后访问http://localhost:4000/查看一下博客效果。
$ hexo server
添加Disqus评论支持
静态博客因为是静态的,所以没有办法支持评论等功能。不过很多第三方评论服务都可以通过添加JS代码的方式让博客可以支持评论功能。原来国内比较著名的第三方评论系统有多说,可惜因为无法盈利已经关闭了。Hexo官方支持Disqus,一个国外的第三方评论平台。当然,为了使用Disqus,首先你需要去注册一个账号,并添加一个网站。
默认情况下,Hexo的默认主题landscape是支持Disqus的,相应的源代码可以查看themes\landscape\layout\_partial/after-footer.ejs
文件。当主配置文件中存在disqus_shortname
选项,而且相应URL正确配置的话,Hexo就会自动显示Disqus评论。这是我的配置,这里的名称是我的网站的名称。
disqus_shortname: yitian-static-blog
成功配置之后,在每篇文章下面,应该就会看到一个Disqus评论框了。
静态资源处理
假如整个博客只有少量图片等静态资源,我们可以在source
文件夹中新建一个image
文件夹,然后将图片放置进去,在文章中使用MarkDown标准格式![](/image/XX.jpg)
即可访问。但是假如大部分文章都需要图片,那么这种方式就不太适用了。
这时候,我们可以在配置文件中设置post_asset_folder
选项为true
。这样在创建文章时,Hexo会同时创建一个和文章同名的文件夹,我们可以将每个文章单独的资源放入该文件夹,然后以相对路径的方使引用。
post_asset_folder: true
举个例子,假如图片名为hello.jpg
,已经放置到文章同名的文件夹中,那么在文章中引用图片,可以使用标准Markdown形式![hello](hello.jpg)
。不过这种方式仅适用于在文章页面下,假如在主页或者归档页面查看文章,由于相对路径不同,图片是无法正常显示的。
对于这个问题,我们需要使用Hexo的标签插件来解决。这个插件在Hexo 3中已经包括到核心包中,所以我们可以直接使用,使用语法如下。如果图片名或标题有空格,需要使用双引号包括。
{% asset_link 图片名 图片标题 %}
这样一来,不管在哪个页面,图片都可以正常显示了。
发布博客
发布博客有很多种方式,如果你有一个自己的服务器,可以选择FTP、RSync、Git等多种方式发布到服务器。当然这里为了省事就直接发布到Github Pages上。由于Github Pages要求静态网站在项目的根目录或者docs
目录下,所以这里还要对项目进行一下小修改,在配置文件中将发布路径改为docs
。
public_dir: docs
然后生成静态页面。
$ hexo generate
然后将所有代码一起提交到Github上,并在设置中选择docs
选项,然后保存。
然后访问Github Pages的路径,就会发现项目已经出现了,当然样式都是乱的。因为我们还没有设置合适的URL。本地开发的话,路径直接就是域名。但是Github Pages的路径一般都不是以域名开头的,所以需要我们按照自己的项目路径进行修改,下面是我的项目配置。
url: https://techstay.github.io
root: /my-static-blog/
修改完毕之后别忘了执行hexo generate
重新生成静态文件,然后再次提交,就可以发现这次项目完美的出现了。
当然这篇文章仅仅介绍了Hexo的一点点知识,Hexo还有丰富的主题、插件可供探索。这里就仅仅抛砖引玉,各位如果有兴趣的话请自行探索吧!最后附上我的静态博客地址https://techstay.github.io/my-static-blog/,欢迎大家查看!
用Hexo制作自己的静态博客相关推荐
- 基于Hexo+Gitee的个人静态博客网页搭建
基于Hexo+Gitee的个人静态博客网页搭建 前言 环境搭建:NodeJs+Git+Hexo (Win10+64位) NodeJs安装 Hexo安装 主题配置 Gitee仓库创建和部署 个性化配置 ...
- 使用Hexo在Github搭建静态博客
为什么80%的码农都做不了架构师?>>> 1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/downloa ...
- 利用hexo和github搭建静态博客(一)
在搜素文章时无意间发现一篇很漂亮的博客,一看时个人博客,自己也就想创建一个属于自己的博客,初步完成后就写下此文章便于日后查询. 本文是利用hexo在GitHub上建立的静态博客. 主要有三个步骤: 下 ...
- Hexo+next主题美化静态博客
前言 需要在Hexo下配置next主题 Hexo配置next主题教程:点我跳转 更改配置以后使用素质三连:hexo clean && hexo g && hexo s即 ...
- Win10环境下基于Hexo的静态博客环境搭建,及其阿里云部署
引言 1.为什么要搭建自己的个人博客 工作和学习过程中,我们经常遇到一些这样或那样的问题,此时我们可能会在网上找到相应的解决方法.但是过了一段时间之后,当我们再次碰到类似的问题时,早已忘记以前是怎么解 ...
- 用户名或用户域名_给自己的Hexo+GitHub静态博客绑定自己的专属域名
前言 GitHub+Hexo静态博客详细教程,介绍:对比:部署:发布 - 听海的博客www.tsingsea.com 以上是Hexo+GitHub静态博客超级详细搭建教程的正文部分,也算是这个专题教 ...
- 使用 Hexo + Next 搭建静态博客
欢迎移步我的博客阅读:<使用 Hexo + Next 搭建静态博客> 前言 Github 为广大开发者提供了一个非常好的平台,不仅是代码的开源,同时Github还提供了开发者可以在 Git ...
- 使用github+hexo搭建静态博客
npm install hexo -g #安装Hexo npm update hexo -g #升级 hexo init #初始化博客 命令简写 hexo n "我的博客" == ...
- Hexo+Kaze+Gitee Pages 搭建静态博客网站
前言 建网站本身是一个很大的工程,涉及前端页面的搭建,网站数据的存储,还要购置服务器资源,甚至是后期的维护,过程相当繁琐. 不过如果仅仅是想搭建个人的网站,写写博客,想要美观,又不想操心太多和写博客无 ...
- python博客下载本地文件_Linux CentOS6安装Git、Node.js及Hexo静态博客安装和使用方法...
有些时候,我们有听到或者看到某个技术很希望自己也能尝试一下,即便我们没有项目需求,但接触过后以后还可以跟别人吹嘘这个技术我玩过,具体能否玩的精通都无所谓,至少我们可以体验到其中的乐趣.这不,这几天有接 ...
最新文章
- linux 下用户管理
- android开发年总结
- json 反射java 实体_Java 将JSON反射到实体类
- 如何用Matlab求矩阵的秩、乘积、逆、行列式的值、转置
- 剑指offer(34-40题)详解
- mysql 选择字符集 拉丁字符集_mysql的字符集
- pcb设计实战与应用智能手机_机构强烈推荐+突破临界点+全球第一大PCB厂商=鹏鼎控股...
- [翻译] Fast Image Cache
- gui界面怎么分页_什么是用户界面和体验设计
- 拓端tecdat|R语言ARMA GARCH COPULA模型拟合股票收益率时间序列和模拟可视化
- 80个超详细的Python入门实例
- ad18的一个bug,修改不了封装
- Mac 同时安装jdk7、jdk8
- nextjs中阿里icon库的引入使用
- Verilog HDL系统任务说明语句task
- 记一次在咸鱼上购买MacBook Pro的经历
- 上海电机学院计算机科学与技术专业怎么样,上海电机学院计算机科学与技术专业2016年在上海理科高考录取最低分数线...
- Postman 的替代品来了
- 全国大学生数学建模竞赛禁用MATLAB?这届哈工大学生太难了
- Web 加载速度优化清单,让你的网站快上加快