使用 Hexo 和 NexT 搭建博客

曾用过多个在线博客,也尝试过 org-mode ,甚至写过一个能从 POD 文档生成静态博客的小工具,但无可否认还是 Hexo+NexT 最简洁漂亮 ;-)

安装

使用 nvm 安装 Node.js

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | sh

安装完成后,重启终端并执行下列命令即可安装 Node.js。

nvm install stable

参考: 安装 Node.js

安装 Hexo

npm install -g hexo-cli

参考: 安装 Hexo

建站

安装 Hexo 完成后,执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

hexo init <folder>
cd <folder>
npm install

参考: 建站

安装 NexT 主题

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

参考: NexT 主题

配置

站点配置文件: 根目录下的 _config.yml
主题配置文件: 主题目录下的 _config.yml

启用 NexT 主题

修改站点配置文件,查找关键词 theme ,并修改主题为 next

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

修改主题配置文件,查找关键词 scheme ,并修改模式为 Mist

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

设置语言

修改站点配置文件,查找关键词 language ,并修改语言为 zh-CN

language: zh-Hans

设置菜单

修改主题配置文件,查找关键词 menu ,增删菜单内容

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  #archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

在 hexo 根目录下,执行以下命令,添加对应的标签页

hexo new page about
hexo new page tags
hexo new page categories 

设置头像

修改主题配置文件,查找关键词 avatar ,并修改头像的链接地址

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /images/a-laugh.jpg

设置站点描述

修改站点配置文件,查找关键词 Site ,并修改站点标题、描述等

# Site
title: 思悟
subtitle: -好奇-感受-思考-
description: 生命的故事
keywords:
author: a-laugh
language: zh-Hans
timezone:

设置首页显示

修改主题配置文件,查找关键词 auto_excerpt ,并修改显示配置

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

本地搜索

在 hexo 根目录下,执行以下命令

npm install hexo-generator-searchdb --save

修改主题配置文件,查找关键词 local_search ,并修改搜索配置

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

设置 RSS

在 hexo 根目录下,执行以下命令

npm install hexo-generator-feed --save

修改站点配置文件,追加 feed 信息

# 设置 RSS
feed:
  type: rss2
  path: rss2.html
  limit: 5
  hub:
  content: 'true'

设置代码高亮

修改站点配置文件,查找关键词 highlight ,并修改高亮配置

highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

优化 URL

修改站点配置文件,查找关键词 URL ,并修改URL配置

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://a-laugh.github.io
root: /
permalink: :year-:month-:day/:title.html
permalink_defaults:

参考: Github+Hexo一站式部署个人博客

设置评论

修改主题配置文件,查找关键词 Valine ,并修改评论配置

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid: BSGB3XyPlFvU9hc9NCKWOs4l-MdYXbMMI # your leancloud application appid
  appkey: zGMgeVbw0YwY5IWkycywg4bn # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: 你是怎么想的? # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

参考: 为你的 Hexo 加上评论系统-Valine

部署

分支策略

  • master 分支:存放博客静态网页
  • hexo 分支:存放博客源文件

修改站点配置文件,查找关键词 Deployment ,并修改部署配置

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/a-laugh/a-laugh.github.io.git
  branch: master

部署脚本

利用 deploy.sh 脚本一键部署,提高部署效率,脚本放至 hexo 根目录中

#!/bin/bash
DIR=`dirname $0`

# Generate blog
hexo clean
hexo generate
sleep 5

# Deploy
hexo deploy
sleep 5

# Push hexo code
git add .
current_date=`date "+%Y-%m-%d %H:%M:%S"`
git commit -m "Blog updated: $current_date"

sleep 2
git push origin hexo

echo "=====>Finish!<====="

参考: Github+Hexo 一站式部署个人博客

恢复

本地资料丢失或其他主机搭建博客步骤

  • 拷贝 hexo 分支源码到本地: git clone -b hexo [email protected]:a-laugh/a-laugh.github.io.git
  • 安装 hexo 及各类插件
  • 本地安装调试

参考: Github+Hexo 一站式部署个人博客

原文地址:https://www.cnblogs.com/a-laugh/p/11737391.html

时间: 2024-11-02 17:29:01

使用 Hexo 和 NexT 搭建博客的相关文章

hexo零基础搭建博客系列(一)

关于其他搭建 hexo4快速搭建博客(二)更换主题 hexo4快速搭建博客(三)美化 很全面 收集很多资料 hexo4快速搭建博客(四)写作技巧包含图床和自动变图床的插件 hexo4搭建博客系列(五)优化博客(无坑) 部署到阿里云 hexo4搭建博客系列(六)百度,必应,谷歌收录(无坑) 搭建一个博客不难,但是网上资料好多坑.可能我有些会写错,请在评论指出.但是有经过测试的.我用的版本是 hexo4.0 + NexT7.6版本. 我的个人博客 有阿里云服务器就可以部署上去,没有也可以用githu

Hexo+NexT(一):在Windows下安装Hexo+NexT及搭建博客

阅读本篇之前,假定读者已经有了Node.js的基础,如需要补充Node.js知识的,请自行百度. Hexo是在Node.js框架下的一个项目,利用Node.js提供的强大功能,完成从Markdown到静态网页的转换. NexT是Hexo项目下的一个主题插件,提供可高度定制的页面外观. Hexo博客专题索引页 1. 我们要做什么 搭建Node.js环境 下载Hexo项目 下载NexT的主题插件 运行博客 2. 在Windows系统下安装Node.js 在Windows下,Node.js的核心是命令

Hexo+NexT(零):最全Hexo+Next搭建博客教程

快速.简洁且高效的博客框架 有位大神说,喜欢写博客的人的人,折腾博客会经历三个阶段.找到一个免费空间,搭建一个博客,很欣喜,很有成就感,此为一阶段:受限免费空间各种限制,自己买空间和域名,实现对博客的完全控制,此为二阶段:管理网站太累,只想安安静静码文字,管理网站这种琐事,交给专业的人士去打理吧,此为博客人生的最高阶段. 对于我这种完美控的人,既入了坑,自然是要直达最高阶段了.所以,现在我主机在手,域名也有,网站基本框架建好,一下子实现了少操心,多码字的幸福生活.不过,总觉得过程如白驹过隙,太短

Github + Hexo 搭建博客

服务加速 brew 加速 http://blog.suconghou.cn/post/homebrew-speedup/ github加速 http://www.selfrebuild.net/2016/11/01/github-fast-host/ 零基础搭建博客 brew 安装指定版本的 nodejs http://blog.csdn.net/jonahzheng/article/details/51967438 hexo 命令创建博客 http://blog.csdn.net/jzooo/

在Windows下使用Hexo+GithubPage搭建博客的过程

1.安装Node.js 下载地址:传送门 去 node.js 官网下载相应版本,进行安装即可. 可以通过node -v的命令来测试NodeJS是否安装成功 2.安装Git 下载地址:传送门 去 Git 官网下载相应版本,进行安装即可. 选择在第二个在系统的cmd也可以使用 可以通过git –version的命令来测试git是否安装成功 3.注册Github账号 去 Github 官网进行注册即可. 注册完之后记得添加 SSH Key. 这个 SSH Key是一个认证,让github识别绑定这台机

hexo+github个人博客搭建

首先要了解一下我们搭建博客要用到的框架.Hexo是高效的静态站点生成框架,它基于Node.js.通过Hexo,你可以直接使用Markdown语法来撰写博客.相信很多小伙伴写工程都写过README.md文件吧,对,就是这个格式的!写完后只需两三条命令即可将生成的网页上传到你的github上,然后别人就可以看到你的网页啦.是不是很简单?你无需关心网页源代码的具体细节,你只需要用心写好你的博客内容就行. 安装Node.js 首先下载最新版Node.js,我这里给的是64位的. 安装选项全部默认,一路点

github+hexo搭建博客

引言 之前用阿里云弹性web托管采用wordpress搭建的个人博客,经过我使用一段时间之后发现存在很多问题: 网站的响应速度非常慢,估计打开主页需要3-4s的时间,我经过搜索发现很多人都有这样的问题,所以应该不是wordpress的锅,而是阿里云弹性web托管的问题,毕竟我买的时候一年只要几百块,而且还是最便宜的经济版(内存128M+2G网页空间+4G流量+1G数据库).其实我后来才知道弹性web托管是一个啥玩意 ,和虚拟机差不多,性能非常有限.可惜我当时不知道啊,否则应该买云虚拟主机独享版的

多Git账户以及Hexo搭建博客进阶

多Git账户以及Hexo搭建博客进阶 1.生成密钥 可以看到已经生成的id_rsa是0LinkSec git账户的密钥 而yof3ng的则是我准备搭建的第二个hexo的密钥 2.配置ssh config文件(ssh目录下新建config文件) #userName1 Host 0LinkSec HostName github.com PreferredAuthentications publickey IdentityFile ~/.ssh/id_rsa ? #userName2 Host yof

使用coding和hexo快速搭建博客

欢迎访问我的个人博客皮皮猪:http://www.zhsh666.xyz 今天教大家怎么用hexo快速搭建自己的博客.我不是专业人士,不懂前端知识,所以我十分讨厌那些专业术语,讲了一大堆,对于技术小白来说,就像听天书一样,云里雾里的.所以下面的内容都是我自己的理解,语言很通俗,有可能说的不那么专业,还望专业人士勿喷. 首先声明一点,刚开始搭建博客会比较麻烦,有很多东西大家可能以前没有听说过,不要怕,耐着性子一边看教程一边动手操作,你一定能够做出来的!好吧,废话不多说,现在开始! hexo hex