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


使用hexo+github可以免费、快速地搭建一个静态博客网站，并且使用hexo提供的命令以及git自身的功能可以很便捷地管理博客。

使用github部署静态页面

在了解hexo之前，我们先看看如何使用github部署静态页面。

注册github账号

访问github官网注册一个账号，该流程和一般网站注册账号一样，在此不赘述。

创建一个git仓库


其他项如果需要可以自主填写，这里只填写仓库名，点击Create repository创建仓库。

提交一个测试页面

执行git clone命令将仓库克隆到本地

git clone [email protected]:mfaying/hexo-test.git


向hexo-test仓库提交一个测试的html页面，命名为index.html，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hexo test</title>
</head>
<body>
  hexo test
</body>
</html>

提交并推到远端

git add .
git commit -m 'add index.html'
git push origin master

提交成功以后，hexo-test仓库的内容变成了

setting设置

点击setting设置

找到GitHub Pages，点击Choose a theme

直接点击Select theme

此时你会发现GitHub Pages发生了变化，Your site is ready to be published at https://mfaying.github.io/hexo-test/说明你的静态网站已经建成了。

直接点击https://mfaying.github.io/hexo-test/ 访问便会出现如下内容，静态服务器默认会访问index.html文件。

至此，我们成功地使用github搭建了一个静态网站。当然啦，这个网站几乎没有什么内容，所以接下来我们将使用hexo搭建一个功能完备的博客网站，但是部署方法就是这里介绍的github的静态服务器功能。

使用hexo搭建博客网站

全局安装hexo-cli

npm install hexo-cli -g

npm安装速度较慢，可以切换到国内的淘宝NPM镜像，使用cnpm命令代替npm命令安装。

安装完成后执行hexo -v检查安装是否完成。

hexo -v

hexo-cli: 1.1.0
os: Darwin 18.2.0 darwin x64
http_parser: 2.8.0
node: 10.15.3
v8: 6.8.275.32-node.51
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

初始化博客工程

hexo init blog
cd blog

安装NexT主题

我们这里选取了NexT主题替换默认的landscape主题，当然你完全可以使用默认的landscape主题，或者根据自己的喜好选择其他主题。安装主题的方式非常简单，只需要将主题文件克隆至工程目录的 themes目录下， 然后修改下配置文件_config.yml即可。

在工程目录下克隆最新版本的next主题

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

修改根目录下_config.yml配置文件，找到theme字段，将landscape改为next。

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

修改为

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

执行hexo server，启动本地服务器。

hexo server

访问网址http://localhost:4000/便可以看到使用next主题的博客网站的样子了。

将本地hexo工程连接到git远端仓库

我们用前面建立的hexo-test和blog两个工程做演示。其中本地hexo为blog目录，hexo-test为git远端仓库，我们需要将本地blog目录里的文件提交到远端的hexo-test仓库。

首先，我们之前提交的index.html文件，我们不再需要了，先删除它。

cd hexo-test
rm -rf index.html
git add .
git commit -m 'remove index.html'
git push origin master

blog目录git初始化

cd blog
git init

此时我们看到next目录无法直接提交，这是因为next目录是一个子模块(submodule)

我们需要删除next目录下的.git文件，next目录变成一个普通文件夹，这样它就可以直接提交了。
进入next目录，执行rm -rf .git命令

cd themes/next/
rm -rf .git

此时next目录就可以直接提交了

执行以下命令就可以将blog目录里的内容提交到远端的hexo-test仓库了

git add .
git commit -m 'init'
git remote add origin [email protected]:mfaying/hexo-test.git
git push -f origin master

注意，这里我的本地电脑和远端的git已经配置过ssh了，所以提交的时候不会出现权限问题。如果你连接的是自己的远端仓库，可以查找下如何进行git的ssh配置。

部署

部署我们需要建一个前面提到的开通GitHub Pages功能的工程，这个专门放置部署的静态文件，我们将该工程命名为hexo-test-deploy(若是发布到hexo-test工程上远端的源代码会被部署的静态文件覆盖掉)。这时hexo-test其实就不需要开通GitHub Pages功能了，而且hexo-test也可以设置成私有工程以避免源代码被查看。

最后我们需要配置部署路径，修改文件_config.yml的deploy字段如下：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:mfaying/hexo-test-deploy.git #你的GitHub Pages的仓库地址
  branch: master

我们需要先安装hexo-deployer-git依赖包才能执行hexo deploy命令部署网站

npm install hexo-deployer-git --save

执行以下命令

hexo clean # 简写hexo c，清除缓存文件(db.json)和已生成的静态文件(public)
hexo generate # 简写hexo g，生成静态文件
hexo deploy # 简写hexo d，部署

其中hexo g和hexo d可以合并写成hexo d -g
现在我们访问之前的链接 https://mfaying.github.io/hexo-test-deploy/，一个静态博客网站生成了！

至此，我们其实已经完成静态博客网站的建设，后续我们将介绍一些功能和方法，使网站功能更加完备。

博客网站功能完善

这节我们只会介绍几个完善网站功能的方法，如果你还想增加其他功能，可以通读NexT 使用文档、文档|hexo，根据自己的需要来增加功能。

设置语言

修改站点配置文件(_config.yml)的language字段，比如设置为简体中文

language: zh-Hans

此时页面变为

设置菜单

修改主题配置文件(/themes/next/_config.yml)的menu字段

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

修改为

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

创建tags页面

hexo new page "tags"

编辑/source/tags/index.md文件为

---
title: tags
date: 2019-10-05 16:02:39
type: "tags"
comments: false
---

创建categories页面

hexo new page "categories"

编辑/source/categories/index.md文件为

---
title: categories
date: 2019-10-05 15:59:54
type: "categories"
comments: false
---

配置根路径为

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

访问页面如下

创建一篇文章

执行命令创建一篇文章

hexo new '测试文章'

我们发现在source/_posts/目录下生成了测试文章.md，编辑内容如下

---
title: 文章测试
date: 2019-10-05 16:20:04
tags:
    - hexo
categories: 其他
---
这是摘要
<!-- more -->
以下是正文
# 标题1
1
## 标题2
2

部署后可以发现一篇文章创建成功了。

push时自动部署

我们借助git的钩子实现在本地代码推送到远端时自动部署网站。

首先安装husky开发环境依赖包

npm install husky --save-dev

修改根目录package.json文件如下

"scripts": {
  "publish": "hexo clean && hexo d -g"
},
"husky": {
  "hooks": {
    "pre-push": "npm run publish"
  }
},

此时执行命令

git add .
git commit -m '自动部署'
git push origin master

我们会发现在代码提交时，自动执行了hexo clean && hexo d -g部署命令。

至此，我们使用hexo和github搭建静态博客网站的内容已经介绍完毕了，hexo其实还有很多相当多的功能可以使用，比如阅读人数统计、评论功能等等，你还可以根据自己的想法去修改源码完善自己的博客。

参考

  1. 文档|hexo
  2. hexo
  3. NexT 使用文档

原文地址：https://www.cnblogs.com/fe-read/p/11783535.html

时间： 2024-10-24 15:21:05

使用hexo和github搭建个人博客网站的相关文章

Hexo和github搭建个人博客 - 朱晨

GitHub账号 mac/pc 环境 12 node.jsgit 创建GitHub仓库 登陆GitHub,创建一个新的Respository Repository name叫做{username}.github.io {username}代表你的GitHub用户名,Repository name一点要叫这个 绑定域名 待定 绑定ssh秘钥 设置git用户名和邮箱 12 git config --global user.name "liuxianan"git config --globa

记自己利用hexo和github搭建个人博客的过程

--------------------------------------可能我书写的方式跟别人顺序不一样,但这是我的成功经验-------------------------------------- 1.先看成果---小小易的个人博客 2.工具+版本 npm 3.10.8 git Shell 3.开始 1),先从简单的开始: 先去github里创建一个repository;如图; 创建后的页面 ![image](D:\blog\source\hexoImg/2017-04-25_00260

Hexo + Github 搭建个人博客网站

参考这两篇文章 https://chujunwen.xyz/posts/c41c188d/ 图文 https://www.cnblogs.com/fengxiongZz/p/7707219.html https://blog.csdn.net/weixin_30472035/article/details/98930302 原文地址:https://www.cnblogs.com/ahacker15/p/12219418.html

Hexo+Github/Coding免费搭建个人博客网站

体验更优排版请移步原文:http://vblog.win/blogs/other/hexo-github-build-blog.html 很早之前就想搭建一个属于自己的博客网站,一方面是给自己做笔记,把平时遇到的问题和解决问题的方式方法记录下来,顺便提升自己的表达能力.总结能力:另一方面,个人博客就像是自己在网络世界中的一个小家,一个完全属于自己的空间,你可以在这里尽情发挥,别人可以通过它来了解你.前段时间偶然间发现了Hexo,看了两天官方文档,参考网上教程,搭建了自己的个人网站:http://

《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+Hexo+Github搭建个人博客（续）

一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在上篇博文的基础上分别从以下几个方面做简单的后续介绍: 博客相关配置介绍 博客主题 Yilia 配置介绍 如何制作并配置网站缩略图 如何将博客同步到 Github.Coding 中 如何使用 Git 同步 Github 与 Coding 的代码 如何申请域名并作域名解析 如何将域名绑定至 Github.Codi

阿里云+wordpress搭建个人博客网站

文章来源:http://www.cnblogs.com/smyhvae/p/4965163.html 原文服务器准备部分去掉了,记录重要部分留作回头整理. 版本情况如下: 阿里服务器web环境一键安装包 官网购买地址: 分享:https://files.cnblogs.com/files/wowind/sh-1.5.5.zip wordpress: 官方下载地址:https://cn.wordpress.org/ phpMyAdmin: 官方下载地址:https://www.phpmyadmin

github搭建个人博客 hexo框架 next主题

之前就想搭建自己的博客,现在终于得以实施. 参考了多篇博客,然后又在虚拟机了往往复复试了好多次, 现在基本搭建完毕. 我是基于hexo博客框架, next主题搭建的博客, 静态网页.   大体就是, 先在本地搭建好整个系统, 然后再提交到github. 因为此篇文章只是捡部分内容说,所以我先列出来我参考的博客,这里谢谢他们的无私分享了. hexo博客框架 + next主题 + 插件等整个流程请参考ezlippi的两篇博客:  https://www.ezlippi.com/blog/2015/0

使用hexo+GitHub搭建个人博客的心得（含教程）

Author Email Yaoyao Liu [email protected] 前言 对于广大CS专业的学生和码农,找一个地方写博客,记录一些编程.配置环境.阅读论文的心得体会是一个很常见的习惯.当然想搭建个人博客,就需要找个靠谱的平台,主要就是以下的两种方式: 使用网站提供的博客平台,例如国内的CSDN.博客园:国外的Blogger.Wordpress 自己建站,发布到自己的服务器上,或者发布到GitHub.GitLab.Bitbucket等支持静态网页发布的git平台 针对于第一种方式,