使用 Github + Hexo 从 0 搭建一个博客

最近有几位同学在公众号后台留言问我的博客站是怎么建站的,思来想去,还是写一篇从 0 开始吧。

前置准备

我们先聊一下前置准备,可能很多同学一听说要自己搭一个博客系统,直接就望而却步。不得有台服务器么,不得搞个数据库么,不需要域名备案么?当然,这些确实是建立一个博客站点需要的东西,如果都没有,问题倒是也不大。

首先,Github 为我们做出了巨大的贡献,直接帮我们解决服务器和域名问题,当然,在国内访问 Github 可能会有些慢,但是国内有 Gitee 啊,完全不逊色 Github 的好不好。

博客站的建立,这时我们需要用到 Hexo ,这个博客框架没有那么的重量级,它是使用 Markdown 直接来写文章,然后可以将文章编译成静态页面,编译完成后,我们只需要将编译好的页面放在 Github 或者 Gitee 上,就可以直接被访问到。这样,我们就省去了一台数据库和服务器,文章的内容、标题、标签等信息就无需放在数据库中了,可以直接在静态页面上访问到。

那么,接下来,需要的就是一个 Github 或者 Gitee 的账号了,这个我就不多讲,大家自行准备吧。

环境安装

Node.js

Hexo 的编译环境是使用 Node.js 的,需要在自己的电脑上安装 Node.js ,下载地址我直接贴出来:http://nodejs.cn/download/ 。各位直接选择自己对应系统的 Stable 版本安装就好。

windows 环境下载后一路 next 即可,无需额外选择什么。安装完成后环境变量如未自动配置,还需配置下环境变量,配置完成后可以使用如下命令验证是否安装成功:

node -v
# v10.16.3
npm -v
# 6.9.0

博主安装的时间比较早,版本比较老了,各位领会精神。

Hexo

接下来我们安装 Hexo ,这是一个博客框架,Hexo 官方还提供了一个命令行工具,用于快速创建项目、页面、编译、部署 Hexo 博客,所以在这之前我们需要先安装 Hexo 的命令行工具。

npm install -g hexo-cli

安装完成之后,可以使用如下命令验证安装是否成功:

hexo -v

博主这边的输出如下:

hexo-cli: 2.0.0
os: Windows_NT 10.0.18362 win32 x64
http_parser: 2.8.0
node: 10.16.3
v8: 6.8.275.32-node.54
uv: 1.28.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 64
nghttp2: 1.39.2
napi: 4
openssl: 1.1.1c
icu: 64.2
unicode: 12.1
cldr: 35.1
tz: 2019a

创建项目

接下来到了重头戏的时间,开始创建一个博客项目。

接下来,我们使用 Hexo 在本地创建一个项目,并在本地将这个项目整体跑通看看。

在一个自己喜欢的目录下创建项目,使用以下命令:

hexo init <folder>

这里的 <folder> 是项目名称,使用自己喜欢的名称,我这里使用 firstblog

hexo init firstblog

静静等待进度条走完,这样我们在 firstblog 这个文件夹中就有了 Hexo 初始化的相关文件。如图:

进入这个文件夹中,安装相关 node 依赖:

npm install

接下来,我们可以使用 generate 命令将刚刚生成的文件编译成静态 HTML 代码了。

hexo generate

可以看到输出结果里面包含了 js、css、font 等内容,并发现他们都处在了项目根目录下的 public 文件夹下面了。

然后我们使用 Hexo 提供的 server 命令,让博客在本地运行起来,如下:

hexo server

服务默认会在 4000 端口,直接在浏览器中访问 http://localhost:4000 ,我们看下结果:

到这里,整个博客的架子就好了,我们只使用了 3 个命令。

部署

接下来,我们要将这个建好的博客部署到 Github Page 上验证一下可用。成功之后我们再进行一些其他的骚操作,比如更换主题,修改配置等等。

这里需要我们先在 Github 上创建一个仓库。

这里有一点需要注意,GitHub Pages 允许每个账户创建一个名为 {username}.github.io 的仓库,另外它还会自动为这个仓库分配一个 github.io 的二级域名。各位同学创建命名规则可以跟参照博主的命名方式。

仓库创建完成后,接下来可以开始进行部署了, Hexo 的部署命令:

hexo deploy

在部署前需要先安装一个插件:

npm install hexo-deployer-git --save

然后我们还需要配置一下本地项目的配置文件 _config.yml ,这个文件在本地项目目录的跟目录下,打开修改最下面的部署的部分:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: {git repo ssh address}
  branch: master

博主这边修改结果如下:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:meteor1993/meteor1993.github.io.git
  branch: master

然后执行 hexo deploy 命令,看到以下差不多的内容说明部署成功:

INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
On branch master
nothing to commit, working tree clean
Enumerating objects: 46, done.
Counting objects: 100% (46/46), done.
Delta compression using up to 12 threads
Compressing objects: 100% (36/36), done.
Writing objects: 100% (46/46), 507.64 KiB | 1.67 MiB/s, done.
Total 46 (delta 3), reused 0 (delta 0)
remote: Resolving deltas: 100% (3/3), done.
To github.com:meteor1993/meteor1993.github.io.git
 * [new branch]      HEAD -> master
Branch 'master' set up to track remote branch 'master' from '[email protected]:meteor1993/meteor1993.github.io.git'.

这时,我们就可以访问一下我们 Github Page 为我们分配的域名了,比如我的仓库名称为 meteor1993.github.io ,那我这里就要访问:https://meteor1993.github.io,结果如下:

这时我们可以去 Github 仓库看下具体上传了什么内容:

可以看到,这里就是将我们 public 目录下的所有文件上传了,Hexo 把编译之后的静态页面内容上传到 GitHub 的 master 分支上面去了。

站点配置

我们上面仅仅只是将初始化的页面部署成功了,博客里还有一些站点的信息尚未配置,这些站点信息是为了让搜索引擎知道我们的站点是做什么的。

同样是需要配置项目根目录的 _config.yml 文件,打开这个文件,找到 site 相关的配置信息。

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

小编这里的工程仅是做演示使用,并无什么其他的作用,就随便写写了,各位同学可以根据自己的需要做配置:

# Site
title: Geekdigging
subtitle: '一个专注于技术分享的博客'
description: '主要涉猎方向有 Java 、 Python 等领域'
author: 极客挖掘机
language: zh-CN

小编这里主要将语言设置成了中文,我们看下修改后的博客长什么样:

可以看到其中的时间日期格式变成了中文。这样我们就完成了博客的站点配置。

修改主题

目前默认的样式风格并不是那么好看,如果想要换一下的话,就涉及到了主题的修改。目前 Hexo 使用最多的一定是 Next 主题。当然,小编的站点并不是使用的 Next 的主题。

接下来,我们来看下如何在 Hexo 中使用 Next 主题。

首先我们需要将 Next 从 Github 上克隆下来,命令如下:

git clone https://github.com/theme-next/hexo-theme-next themes/next

我们直接将这个主题克隆至项目的 themes 目录下。

克隆完成后, Next 的源码就会出现在 themes 目录下。我们需要修改根目录下的 _config.yml 文件中的主题配置,这样我们就可以使用刚才我们克隆好的 Next 主题了:

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

修改为:

theme: next

重启本地服务,我们看下效果:

主题配置

Next 主题同样为我们提供了丰富的配置,供我们自定义自己的博客站点使用。

在目录 themes\next 中,找到 _config.yml 文件并打开。

Next 同样为我们准备了几种样式可供选择:

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

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

这些样式同样都是黑白配色,仅布局风格不同,各位同学可以选择自己喜欢的布局风格。

关于 Next 的更多配置小编这里就不一一列举了,属实有些多,这里提供 Next 主题的官方文档,是中文版的,有需要修改的同学可自行参考。官方文档:http://theme-next.iissnan.com/theme-settings.html 。

添加文章

添加文章 Hexo 也为我们提供了相关的命令,比如我们要添加一个名为 test 的文章,如下:

hexo new test

我们可以看到,在 source\_posts 的目录下,创建了一个 test.mdMarkdown 的文档。打开看下里面的内容:

---
title: test
date: 2019-11-10 12:28:52
tags:
---

这些内容仅是自动创建的,我们还可以添加其他的内容进去,可以给各位同学看下我平时的文章头:

---
title: 小白 Python 爬虫部署 Linux
author: 极客挖掘机
categories:
  - 技术分享
tags:
  - 技术分享
date: 2019-11-02 21:05:45
---

开头下方撰写正文,MarkDown 格式书写即可。

这样在下次编译的时候就会自动识别标题、时间、类别等等,另外还有其他的一些参数设置,可以参考文档:https://hexo.io/zh-cn/docs/writing.html。

另外在创建新的文章的时候也不是一定要通过命令创建,也可以自己在对应的目录下新建一个 .md 的文档,Hexo 在编译的时候也是同样会识别的。

本篇文章在这里就分享结束了,各位感兴趣的同学可以自己动手尝试一下。

题外话

小编自己的个人站点为了保持访问速度和稳定性,部署在腾讯云上并使用了 CDN 加速,并且映射了自己申请的域名,其中比较困难的点是域名的备案和腾讯云是需要产生一定的费用的,如果只是自己使用无需考虑稳定性和访问速度的话,国内可以部署在 Gitee ,经测试是要比 Github 快很多。

参考

https://cuiqingcai.com/7625.html

https://hexo.io/zh-cn/docs/

原文地址:https://www.cnblogs.com/babycomeon/p/11829562.html

时间: 2024-07-29 22:33:37

使用 Github + Hexo 从 0 搭建一个博客的相关文章

通过Z-BlogPHP程序快速在论坛里搭建一个博客页面

想在我自己的论坛http://www.heimaoxuexi.com搭建一个博客出来.研究了几个博客程序,都不好用,今天测试了下Z-BlogPHP程序,完美搭建:下面讲下具体的步骤: 1.install.php上传到目录里然后按步骤开始安装:2.安装完成后删除zb_install文件夹,这个文件也可以连着一起删除readme.txt:3.选择模版,左边栏最后一步选择应用中心,选择一款喜欢的模版,点击安装,然后回到主题管理处启用:4.开启伪静态,点击插件管理.选择,静态管理中心-开启-选择默认配置

hexo+码云搭建个人博客

1.示例 1 https://blog.csdn.net/weidong_y/article/details/90904781 2 https://www.jianshu.com/p/13f5e4d7099d 2.hexo安装 1 npm install hexo-cli -g 2 hexo init blog 3 cd blog 4 npm install 5 hexo server 1 当然也可以直接用之前搭建的项目 2 只需要将之前项目的scaffolds.source.themes_co

《Hexo+github搭建个人博客》

<Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+github搭建个人博客>1 思维导图总览:2 What?2 简介:2 Hexo:2 NodeJs2 Github4 Git5 Github page:5 Markdown6 How?7 环境配置:7 安装Git8 安装Node.js9 安装hexo13 第一步:打开cmd.13 第二步:进入NodeJS

用node.js 搭建的博客程序心得(node.js实战读书笔记1)

学习node已经有一段时间了,之前把了不起的node.js看完了,基本算了解了一些node的基本的用法还有一些概念了,然后就开始看第二本node.js实战,第一章就是搭建一个博客程序.但是不得不吐槽一下node,发展得太块了,很多库已经和之前的用法不一样了,就要一直去百度google来查询最新的用法,其实我觉得这样并不见得是一件好事,因为不稳定,所以就不好学习,就要一直保持对于node的关注.不废话了,这篇文章就大概说一些在这章里面所学习到的一些东西,经验总结吧 1.express - 基于 N

ubuntu下搭建wordpress博客平台

wordpress已经是一个很受欢迎的php博客系统了,下面讲解一下在ubuntu环境下面怎么用wordpress搭建一个博客系统网站: (1).配置环境 1.安装必要的软件 打开终端: sudo apt-get install apache2 sudo apt-get install libapache2-mod-php5 php5 sudo apt-get install mysql-server-5.0  mysql-common mysql-admin sudo apt-get inst

基于Hexo+Node.js+github+coding搭建个人博客——基础篇

附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My Blog Trip - Power By Hexo 记录一下搭建的基本过程以及遇到的一些问题,仅供参考 = =废话不多说,进入主题 Hexo博客搭建的基础大致流程为: 安装Node.js →安装Git → 安装Hexo → 安装主题 → 本地测试运行 → 注册给github与coding并创建pa

搭建个人博客 github+hexo

其实相关的教程网上有很多很多,不过就是很多很多,而且技术大神们每个人都写得不一样啊喂,为什么我明明就是一步一步按照教程来的还是有那么多乱七八糟的错?...所以我决定写此篇记录一下我搭建博客的过程以及我踩过的一些坑...希望给和我一样的技术小白提供一些帮助.然后,感谢给我提供帮助的各位大神(后面会贴出 参考资料) 不做过多介绍了,快速开始 准备安装软件 依次安装 1.Node.js 2.Git 注册github 访问https://github.com/ 右上角signup uername 最好都

Linux下使用 github+hexo 搭建个人博客03-hexo配置优化

上两张文章,我们说了 hexo 部署.主题的切换.博文的创建.MarkDown 简单使用和 hexo 部署到 GitHub Pages. 也说了我们会使用 next 主题做为我们后期博客的使用和维护.但是该主题的原生态,可能或多或少不满足我们当前的需求,因此需要我们对其进行优化,达到我们想要的效果. 因此这篇文章和下篇文章主要就是针对主题的优化进行书写的. 注意事项 1.优化完毕或者新建博客后需要 hexo g 生成静态文件: 2.然后重新启动服务,使用命令 hexo s -p 80 3.浏览器

使用hexo和github搭建个人博客网站

使用hexo+github可以免费.快速地搭建一个静态博客网站,并且使用hexo提供的命令以及git自身的功能可以很便捷地管理博客. 使用github部署静态页面 在了解hexo之前,我们先看看如何使用github部署静态页面. 注册github账号 访问github官网注册一个账号,该流程和一般网站注册账号一样,在此不赘述. 创建一个git仓库 其他项如果需要可以自主填写,这里只填写仓库名,点击Create repository创建仓库. 提交一个测试页面 执行git clone命令将仓库克隆