基于Hexo搭建静态博客
关于静态博客
通常来讲,建立个人博客有2种方式:
第一,直接在第三方博客平台注册博客空间,如:博客园,简书,CSDN等,这种方式建立的博客,所有数据都存放在博客平台。
第二,自建博客系统,这种方式就是自己实现与博客平台相同的功能,需要涉及多个部分,如:购买云主机,注册域名,CDN,图床等。
自建博客系统也分为2种方式:
其一,使用传统方式建立博客系统,整个系统包含多个组件,如:数据库,管理后台,前台博客展示,有诸多非常优秀的开源方案可以选择,如:Wordpress,Halo等等。由于前端博客页面是动态从数据库查询数据来渲染展示的,可以把这种传统的博客称之为动态博客。即:所有博客相关的数据都保存在数据库中,对数据库是强依赖。
其二,采用静态博客框架将静态文件(如:Markdown语法格式的文件)转换为HTML文件,这样可以直接将这些动态生成的HTML文件布署到Web服务器即可,不需要依赖数据库,当然也不需要管理后台,所有博客文章都是静态文件。目前已经有许多优秀的静态博客框架,如:Hugo,Hexo等等。把这种无需依赖数据库系统,也不需要管理后台建立的博客称为静态博客。
当然,所谓“动态博客”和“静态博客”,他们各有利弊。相比较而演,动态博客的使用门槛低,只需要关注写博客本身即可。而静态博客的搭建需要一定的编程技能基础,但是定制非常灵活,数据管理和备份也非常方便。
环境准备
先安装好Node.js,并配置使用淘宝镜像源。
npm config set registry https://registry.npm.taobao.org
安装Hexo
执行如下命令安装Hexo:
npm install -g hexo-cli
初始化
执行如下命令初始化博客:
# 初始化一个名称为iblog的博客目录,将来所有关于博客的参数设置,以及写博客文章都在该目录下进行
hexo init iblog
cd iblog
npm install
完成上述操作后,在博客文件夹下将会看到如下目录结构:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
themes
目录保存主题相关的文件,所有安装的主题都保存在该目录下。
source
目录保存博客文章静态文件,其中 _drafts
保存草稿,_posts
保存正式文章,这可以在新建资源时指定类型。
_config.yml
是博客的全局配置文件(注:通常主题也会有一个名为 _config.yml
的配置文件)。
至此,一个静态博客的基本基本雏形已经完成了,接下来则需要对博客进行主题配置,并开始写博客文章了。
配置主题
主题决定了博客的展示样式和支持的功能。
安装hexo-theme-3-hexo主题。
主题详细配置:3-hexo使用说明 。
写博客
在博客根目录下执行如下命令新建一篇博客:
hexo new post "这是第一篇静态博客文章"
生成静态页面
写好文章后,在博客根目录下执行如下命令生成静态页面:
hexo generate
执行完上述命令之后,将会在博客根目录下生成一个名为 public
的目录,该目录保存着动态生成的HTML文件,将 public
目录下的内容托管到nginx即可访问。
在本地写博客时,可以在博客根目录下执行 hexo server
命令,启动本地Web服务进行查看。
一些常用的插件
- hexo-deployer-rsync :通过rsync将本地生成的静态文件上传到服务器指定目录,执行命令
hexo deploy
时调用该插件 - hexo-deployer-git:将本地生成的静态文件上传到指定git仓库,执行命令
hexo deploy
时调用该插件
如何搭建博客编辑环境
静态博客本质上只是一个文本文件,所以理论上只需要一个文本编辑器即可。但是为了方便调试,最好还是在新的主机上安装如下环境,会给写博客带来比较好的体验。
- 安装Node.js并配置使用国内镜像源(本站点使用的Node版本为
v16.15.1
) - 安装Hexo框架
- 安装一个顺手的Markdown编辑器
- 安装Git客户端(将本地写的博客文章保存到远程Git仓库)
每次写新的博客文章时,从git仓库拉取最新的博客数据,在博客根目录下执行如下命令安装依赖:
npm install
在博客根目录下执行如下命令创建一篇新的博客文章:
hexo new post "博客文章标题"
编辑博客文章并保存
在博客根目录下执行命令:
# 简写:hexo s
hexo server
在本地启动Hexo框架服务器进行调试预览。
将新写的博客文章提交到git仓库。
最后在博客根目录下执行如下命令将最新的博客文章发布到Web服务器(本质:重新生成静态文件,并上传到Web服务器目录)。
# 简写:hexo d
hexo deploy
Hexo常用命令
# 初始化博客目录
hexo init 博客名称
# 新建博客文章:执行该命令后将会在博客根目录/source/_posts路径下新建一个markdown文件
# 编辑该markdown文件即可
hexo new post '文章标题'
# 将markdown文件转换为html页面(保存到博客根目录/public路径),将来布署到web服务器的是这些转换后的html页面
hexo generate
或
hexo g
# 启动本地Web服务器,默认启动在4000端口,打开浏览器即可看到整个博客站点的所有文章
hexo server
或
hexo s
# 将博客根目录/public路径下转换生成的html页面上传到指定主机
# 这个功能需要先在博客根目录/_config.yml文件配置布署参数,如下示例将通过rsync将文件上传到指定服务器目录
# deploy:
# type: rsync
# host: 192.168.10.122
# user: zhangsan
# root: /data/www/html
hexo deploy
或
hexo d
# 清空博客根目录/public路径下的所有数据
hexo clean
可以将上述命令写一个脚本中,方便调用。
如下脚本示例可用于一键布署最新博客站点(deploy.sh):
#!/bin/bash
hexo clean
hexo g
hexo d
基于Hexo搭建静态博客的更多相关文章
- 使用github和hexo搭建静态博客
获得更多资料欢迎进入我的网站或者 csdn或者博客园 终于写这篇文章了,这是我使用github和hexo搭建博客的一些心得,希望能给大家一点帮助.少走点弯路.刚接触github,只是用来存项目的版本, ...
- Hexo搭建静态博客踩坑日记(二)
前言 Hexo搭建静态博客踩坑日记(一), 我们说到利用Hexo快速搭建静态博客. 这节我们就来说一下主题的问题与主题的基本修改操作. 起步 chrome github hexo git node.j ...
- Hexo搭建静态博客踩坑日记(一)
前言 博客折腾一次就好, 找一个适合自己的博客平台, 专注于内容进行提升. 方式一: 自己买服务器, 域名, 写前端, 后端(前后分离最折腾, 不分离还好一点)... 方式二: 利用Hexo, Hug ...
- 在GitHub上使用Hexo搭建静态博客
搭建静态博客须要一个前提是电脑上有安装git而且有github帐号,这个不懂能够看廖雪峰先生的git教程 1.下载nodejs.在官网上能够下载 2.使用git进入你新建的一个目录,输入命令 npm ...
- hexo搭建静态博客
1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/download/ 可以下载 node-v0.10.33-x64.msi 安装时 ...
- 基于Hexo搭建个人博客网站
## 准备工作 首先下载[nodejs](https://nodejs.org/en/download/),一路next安装即可.验证是否安装成功: ```bash node -v # 输出 v1 ...
- Hexo搭建静态博客站点
什么是Hexo? Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 本文将介绍如何在没有域名和云主机的 ...
- hexo 搭建静态博客 + Next 主题配置
参考手册 HEXO:https://hexo.io/zh-cn/ NEXT:http://theme-next.iissnan.com/ 安装hexo npm install hexo-cli -g ...
- Github+Hexo搭建静态博客
开始 在安装hexo之前,必须确认你已经安装了Node.js和Git,并且注册了一个Github账号. 1.创建Github仓库 1) 仓库名为xxx.github.io 创建一个以"用户名 ...
- 使用 Hexo 搭建静态博客
目录 Hexo 简介 什么是 Hexo? Hexo 安装 Hexo 建站 Hexo 配置 Hexo 自定义主题 Hexo 写作 Hexo 服务器 Hexo 生成与发布 一键部署 Hexo 站点到 gi ...
随机推荐
- 使用 Spring Security 手动验证用户
1.概述 在这篇快速文章中,我们将重点介绍如何在 Spring Security 和 Spring MVC 中手动验证用户的身份. 2.Spring Security 简单地说,Spring Secu ...
- vue+spirngboot 分离技术实现图书信息的增删改查(改造这学期的课程设计【1】)
1.前端项目的创建 vue init webpack bookshopvue 安装axios http://www.axios-js.com/ npm install --save axios vue ...
- 齐博x1钩子自动添加频道参数变量
频道或插件,增加功能的时候,可能要在后台增加开关参数.这个时候只需要增强对应的接口文件即可,比如创建这样一个文件\application\shop\ext\setting_get\give_jifen ...
- ssh登录提示hosts is down
其他无用的网卡配置信息mv走重启network如果还是不行重启一下服务器问题就能解决
- scrapy 如何使用代理 以及设置超时时间
使用代理 1. 单文件spider局部使用代理 entry = 'http://xxxxx:xxxxx@http-pro.abuyun.com:xxx'.format("帐号", ...
- 几个实用 shell 脚本
1. Dos攻击防范(自动屏蔽攻击 IP) #!/bin/bash DATE=$(date +%d/%b/%Y:%H:%M) LOG_FILE=/usr/local/nginx/logs/demo2. ...
- 看了同事这10个IDEA神级插件,我也悄悄安装了
昨天,有读者私信发我一篇文章,说里面提到的 Intellij IDEA 插件真心不错,基本上可以一站式开发了,希望能分享给更多的小伙伴,我在本地装了体验了一下,觉得确实值得推荐,希望小伙伴们有时间也可 ...
- Python基础部分:4、 python语法之注释
目录 一.python语法之注释 1.什么是注释 2.如何编写注释 二.PEP8规范 一.python语法之注释 1.什么是注释 注释用来向用户提示或解释某些代码的作用和功能,它可以出现在代码中的任何 ...
- onps栈移植说明(2)——编译器及os适配层移植
2. 字节对齐及基础数据类型定义 协议栈源码(码云/github)port/include/port/datatype.h中根据目标系统架构(16位 or 32位)及所使用的编译器定义基础数据类型及字 ...
- Day06:运算符详解
运算符 算术运算符:+,-,*,/,%(取余:也叫模运算),++(自增),--(自减)........... 二次运算符+,-,*,/ int a=10; int b=20; int c=50; in ...