【Hexo + Github 搭建自己的专属博客】

news2024/11/15 15:58:56

目录

一、前提环境配置

1. 安装Git和NodeJS

2. 安装Hexo

3. 加载主题

4. 修改主题配置

二、搭建博客

1. 将博客部署在GitHub上

2. 写文章并上传

3. 配置一些特效

三、最终成果

​编辑

一、前提环境配置

1. 安装Git和NodeJS

在 Windows 上使用 Git ，可以从 Git 官网直接 https://git-scm.com/downloads ，然后按默认选项安
装即可。安装完成后，在开始菜单里找到 “Git”->“Git Bash” ，蹦出一个类似命令行窗口的东西，就
说明 Git 安装成功！
在 Git 中绑定 Github 账号，打开 “Git Bash” ，在命令框中依次输入两行命令： 
git config --global user.name “Your Name”
git config --global user.email email@example.com
# 其中Your Name和email@example.com替换成上面注册时的账户名和邮箱
由于 Hexo 是基于 Node.js 驱动的一款博客框架，所以安装 NodeJS https://nodejs.org/en/downl
oad/ 并配置环境变量。
安装之后可以输入以下命令查看是否安装成功： 
git version
node -v
npm -v

2. 安装Hexo

以上环境准备好了就可使用 npm 开始安装 Hexo 了，在命令行输入执行如下命令： 
npm install -g hexo-cli
安装 Hexo 完成后，在指定文件夹下打开 “Git Bash” ，再执行下列命令， Hexo 将会在指定文件夹中
新建所须要的文件： 
hexo init myBlog
cd myBlog
npm install
若是上面的命令都没报错的话，就恭喜了，运行 hexo s 命令，其中 s 是 server 的缩写，在浏览
器中输入 http://localhost:4000 回车就能够预览效果了。

3. 加载主题

大家可以去官网上找自己喜欢的主题下载 https://hexo.io/themes/ 
随后将下载的主题文件夹放在 myblog/themes 中，在 _config.yml 文件中修改 theme 为 hexo
theme-Chic(注意和主题文件名一致)
修改好之后在 “Git Bash” 中执行 hexo g 命令，然后再 hexo s ，在浏览器中输入 http://localhost:4
000 回车就能够预览修改主题后的效果了。

4. 修改主题配置

修改在主题文件夹下的 _config.yml 文件，完成自己个人的配置。 
# Header 主页面标题
navname: Bentham's Blog
# navigatior items 四个文件归类
nav:
Posts: /archives
Categories: /category
Tags: /tag
About: /about
# favicon 图标
favicon: /favicon.ico
# Profile 中间显示名字
nickname: Jeremy Bentham
### this variable is MarkDown form.
# 个人描述，可以修改成自己要显示的句子
description: Lorem ipsum dolor sit amet, **consectetur adipiscing elit.**
<br>Fusce eget urna vitae velit *eleifend interdum at ac* nisi.
# 个人头像图片
avatar: /image/avatar.jpeg
# main menu navigation
## links key words should not be changed.
## Complete url after key words.
## Unused key can be commented out.
# 下方超链接
links:
Blog: /archives
# Category:
# Tags:
# Link:
# Resume:
# Publish:
# Trophy:
# Gallery:
# RSS:
# AliPay:
ZhiHu: https://www.zhihu.com/people/sirice
# LinkedIn:
# FaceBook:
# Twitter:
# Skype:
# CodeSandBox:
# CodePen:
# Sketch:
# Gitlab:
# Dribbble:
Instagram:
Reddit:
# YouTube:
# QQ:
# Weibo:
# WeChat:
Github: https://github.com/Siricee
# how links show: you have 2 choice--text or icon. 图标 or 文字
links_text_enable: false
links_icon_enable: true
# Post page
## Post_meta
post_meta_enable: true
post_author_enable: true
post_date_enable: true
post_category_enable: true
## Post copyright
post_copyright_enable: true
post_copyright_author_enable: true
post_copyright_permalink_enable: true
post_copyright_license_enable: true
post_copyright_license_text: Copyright (c) 2019 <a
href="http://creativecommons.org/licenses/by-nc/4.0/">CC-BY-NC-4.0</a>
LICENSE
post_copyright_slogan_enable: true
post_copyright_slogan_text: Do you believe in <strong>DESTINY</strong>?
## toc
post_toc_enable: true
# Page
page_title_enable: true
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: MMMM D, YYYY
time_format: H:mm:ss
# stylesheets loaded in the <head>
stylesheets:
- /css/style.css

二、搭建博客

1. 将博客部署在GitHub上

点击 Start project 或者下面的 new repository 建立一个新的仓库，注意 Github 仅能使用一个同
名仓库的代码托管一个静态站点 ，这里注意仓库名一定要是： 用户名 .github.io
配置 SSH key ，要使用 git 工具首先要配置一下 SSH key ，为部署本地博客到 Github 作准备。 
git config --global user.name "用户名"
git config --global user.email "邮箱地址"
ssh-keygen -t rsa -C '上面的邮箱'
按照提示完成三次回车，便可生成 ssh key ，采用以下指令也可以查看自己的 ssh ： 
cat ~/.ssh/id_rsa.pub
首次使用还须要确认并添加主机到本机 SSH 可信列表。若返回 Hi xxx! You've successfully
authenticated, but GitHub does not provide shell access. 内容，则证实添加成功。 
ssh -T git@github.com
登陆 Github 上添加刚刚生成的 SSH key ，按如下步骤添加，右上角点击头像 -> settings -> SSH
and GPG keys ，建立一个新的 SSH key, 标题随便， key 就填刚才生成那个，确认建立，这样在你
的 SSH keys 列表里就会看到你刚刚添加的密钥。

此时，本地和 Github 的工做作得差不了，是时候把它们两个链接起来了。你也能够查看官网的部署
教程。先不着急，部署以前还须要修改配置和安装部署插件。第一：打开项目根目录下的
_config.yml 配置文件配置参数。拉到文件末尾，填上以下配置。 第二要安装一个部署插件 hexo-deployer-git ，打开 “Git Bach” ，输如以下指令： 
npm install hexo-deployer-git --save
最后执行如下两条命令就能够部署上传啦，如下 g 是 generate 缩写， d 是 deploy 缩写 
hexo g # 先生成
hexo d # 部署到Github上
这时用浏览器输入 用户名 .github.io 就可以访问刚才的网站啦。

2. 写文章并上传

博客搭好了，就开始写文章了，这里简单介绍一下，详细的文档能够看 hexo 官网。新建文章，输
入如下命令便可 
hexo new '文章标题'
执行完成后能够在 /source/_posts 下看到一个 “ 文章标题 .md” 的文章文件啦。 .md 就是 Markdown
格式的文件，具体用法能够在网上找一下，语法仍是比较简单的。 
---
title: blogTest
date: 2021-08-20 18:07:21
tags: Test
categories: blog1
---
### 1. This is a blog Test
* First
* Second
---
### 2. Show Text
* **这是加粗**
> *这是斜体*
之后依次输入以下命令： 
hexo g # 生成文件
hexo s # 本地服务器查看网站
hexo d # 部署到Github 上

3. 配置一些特效

雪花特效： themes\hexo - theme - Chic\layout\index.ejs 中添加如下代码： 
<!-- 雪花特效 -->
<script type="text/javascript"
src="https://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript"
src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/snow.js"></script>
蜘蛛网特效： themes\hexo - theme - Chic\layout\layout.ejs 中添加如下代码： 
<script>
!
function() {
function n(n, e, t) {
return n.getAttribute(e) || t
}
function e(n) {
return document.getElementsByTagName(n)
}
function t() {
var t = e("script"),
o = t.length,
i = t[o - 1];
return {
l: o,
z: n(i, "zIndex", -1), //置于主页面背后
o: n(i, "opacity", .5), //线条透明度
c: n(i, "color", "0,0,0"), //线条颜色
n: n(i, "count", 100) //线条数量
}
}
function o() {
a = m.width = window.innerWidth ||
document.documentElement.clientWidth || document.body.clientWidth,
c = m.height = window.innerHeight ||
document.documentElement.clientHeight || document.body.clientHeight
}
function i() {
r.clearRect(0, 0, a, c);
var n, e, t, o, m, l;
s.forEach(function(i, x) {
for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 :
1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1,
1), e = x + 1; e < u.length; e++) n = u[e],
null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l
= o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o,
i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t /
2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y),
r.lineTo(n.x, n.y), r.stroke()))
}),
x(i)
}
var a, c, u, m = document.createElement("canvas"),
d = t(),
l = "c_n" + d.l,
r = m.getContext("2d"),
x = window.requestAnimationFrame || window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(n) {
window.setTimeout(n, 1e3 / 45)
},
w = Math.random,
y = {
x: null,
y: null,
max: 2e4
};
m.id = l,
m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z +
";opacity:" + d.o,
e("body")[0].appendChild(m),
o(),
window.onresize = o,
window.onmousemove = function(n) {
n = n || window.event,
y.x = n.clientX,
y.y = n.clientY
},
window.onmouseout = function() {
y.x = null,
y.y = null
};
for (var s = [], f = 0; d.n > f; f++) {
var h = w() * a,
g = w() * c,
v = 2 * w() - 1,
p = 2 * w() - 1;
s.push({
x: h,
y: g,
xa: v,
ya: p,
max: 6e3
})
}
u = s.concat([y]),
setTimeout(function() {
i()
},
100)
} ();
</script>

三、最终成果

我的博客网址：https://wudreamer.github.io/    欢迎大家访问哈！

另外这个网址我还也没有买服务器和域名来进行备案，因此可能访问不稳定，后期会加以修正。

这个前端主题也是在hexo中找来后修改的，等过阵子后有时间再写个自己独属的主题。

如果对这个喜欢主题的话可评论找我！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1549439.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[AIGC] 对比MySQL全文索引，RedisSearch，和Elasticsearch的详细区别

[AIGC] 对比MySQL全文索引，RedisSearch，和Elasticsearch的详细区别

全文搜索是数据库和搜索引擎的重要功能。这个功能能在一个或多个列中查找用户查询的文本&#xff0c;这对诸如电子商务网站和检索大量文本数据的应用是必需的。在这篇文章中&#xff0c;我们将详细对比三种主流全文搜索技术&#xff1a; MySQL全文索引&#xff0c;Redis的Redis…
阅读更多...
使用GPU加速FLUENT计算

使用GPU加速FLUENT计算

1.软件配置 一台具有Nvidia显卡的电脑 确保电脑正确安装有显卡驱动 可通过cmd窗口输入“nvidia-smi”命令&#xff0c;若看到下述窗口则说明显卡驱动安装正确。 安装最佳适配的CUDA版本&#xff0c;也可安装低版本CUDA驱动。 同样可通过cmd窗口输入“nvidia-smi”命令&#x…
阅读更多...
低功耗、低成本 NAS 的可能性

低功耗、低成本 NAS 的可能性

使用现状&#xff1a;多台工作电脑&#xff0c;家里人手一台&#xff0c;还在两个住处 有好几台工作电脑&#xff0c;不同电脑有不同的用途&#xff0c;最大的问题就是各个电脑上文件的同步问题&#xff0c;这里当然就需要局域网里的公共文件夹&#xff0c;在NAS的问题上查了网…
阅读更多...
Consul下载与使用

Consul下载与使用

一下载:Install | Consul | HashiCorp Developer 二开发者模式启动 consul agent -dev 三接口访问可视化页面 http://localhost:8500/ 四.添加服务 Quick Start :: Spring Cloud Consul pom引入 <dependency><groupId>org.springframework.cloud</groupId>…
阅读更多...
//简单函数_素数距离问题

//简单函数_素数距离问题

任务描述 现在给出你一些数&#xff0c;要求你写出一个程序&#xff0c;输出这些整数相邻最近的素数&#xff0c;并输出其相距长度。如果左右有等距离长度素数&#xff0c;则输出左侧的值及相应距离。 如果输入的整数本身就是素数&#xff0c;则输出该素数本身&#xff0c;距离…
阅读更多...
阿里云服务器优惠价格61元一年，多配置报价，来看看

阿里云服务器优惠价格61元一年，多配置报价，来看看

2024年阿里云服务器优惠价格表&#xff0c;一张表整理阿里云服务器最新报价&#xff0c;阿里云服务器网aliyunfuwuqi.com整理云服务器ECS和轻量应用服务器详细CPU内存、公网带宽和系统盘详细配置报价单&#xff0c;大家也可以直接移步到阿里云CLUB中心查看 aliyun.club 当前最新…
阅读更多...
dump文件分析OOM及线程堆栈

dump文件分析OOM及线程堆栈

OutOfMemoryError (OOM) 如果项目报错&#xff1a; OutOfMemoryError: Java heap space&#xff0c;说明堆内存空间&#xff08;Heap Space&#xff09;中没有足够的空间来分配对象了。 一旦发生 OOM&#xff0c;系统有可能不可用&#xff0c;或者频繁重启。属于非常严重的问题…
阅读更多...
家政小程序开发，互联网时代下的市场红利

家政小程序开发，互联网时代下的市场红利

近几年&#xff0c;家政市场持续火热&#xff0c;呈现出了爆发式增长态势。随着生活水平的提高&#xff0c;居民的家政需求也日益多样化&#xff0c;需求不断提高。为提高家政市场的便利&#xff0c;帮助企业提高服务质量&#xff0c;家政行业也开始运用信息技术&#xff0c;打…
阅读更多...
职场人必备！效率翻倍的多微信号必备管理工具大揭秘

职场人必备！效率翻倍的多微信号必备管理工具大揭秘

在职场中&#xff0c;高效率的工作方式是非常重要的。而为了提高工作效率&#xff0c;合理运用一些工作神器也是必不可少的。今天给大家分享一个多微信号管理工具——微信管理系统&#xff0c;它能够帮助职场人员管理多个微信号&#xff0c;让工作变得更加高效。 首先&#xf…
阅读更多...
代码随想录算法训练营第27天|二叉搜索树、LeetCode700.二叉搜索树中的搜索、LeetCode98.验证二叉搜索树

代码随想录算法训练营第27天|二叉搜索树、LeetCode700.二叉搜索树中的搜索、LeetCode98.验证二叉搜索树

代码随想录算法训练营第27天|二叉搜索树、LeetCode700.二叉搜索树中的搜索、LeetCode98.验证二叉搜索树 1、二叉搜索树 二叉搜索树是一个有序树&#xff1a; 若它的左子树不空&#xff0c;则左子树上所有结点的值均小于它的根结点的值&#xff1b;若它的右子树不空&#xff…
阅读更多...
东方博宜 1749. 有哪些闰年

东方博宜 1749. 有哪些闰年

东方博宜 1749. 有哪些闰年 #include<iostream> using namespace std; int main() {int n ; cin >> n ;int cnt ;cnt 0 ;for(int i 1900 ; i < n ; i){if((i%40 && i%100! 0) || (i%4000))cnt 1 ;}cout << cnt ;return 0 ; }
阅读更多...
aws使用记录

aws使用记录

数据传输&#xff08;S3) 安装命令行 安装awscli: https://docs.aws.amazon.com/zh_cn/cli/latest/userguide/getting-started-install.html#getting-started-install-instructions 直到 aws configure list 可以运行 身份验证&#xff1a; 运行&#xff1a; aws config…
阅读更多...
辽渤湾海现已加入2024第七届燕窝天然滋补品博览会

辽渤湾海现已加入2024第七届燕窝天然滋补品博览会

参展企业介绍 大连辽渤湾海产品有限公司&#xff0c;是一家主营海参、鲍鱼、海胆等大连海产品的加工和销售的综合型水产企业&#xff0c;拥有国内精良的整条加工流水线&#xff0c;拥有上千平米的现代化加工办公场地的现代化企业。现已发展成为大连海参产品的主导型深加工基地。…
阅读更多...
【学习】软件测试中误区汇总分析

【学习】软件测试中误区汇总分析

大家有没有想过这个问题&#xff1a;软件测试中有哪些误区呢&#xff1f;想起这个题目&#xff0c;是因为最近遇到好几次关于这方面的讨论。发觉即便做过几年测试的老员工也或多或少有些这方面的困惑。当然一家之言&#xff0c;仅作抛砖引玉之谈。 误区一&#xff1a;测试就是…
阅读更多...
C语言二叉树和堆(个人笔记)

C语言二叉树和堆(个人笔记)

二叉树和堆 二叉树1二叉树的概念和结构1.1特殊的二叉树1.2二叉树的性质&#xff08;规定根节点的层数为1&#xff09;1.3二叉树的存储结构 2.二叉树的顺序结构和实现2.1二叉树的顺序结构2.2堆的概念和结构2.3堆的实现2.4堆的应用2.4.1堆排序 2.5TOP-K问题 3.二叉树的遍历4.二叉…
阅读更多...
已注册的商标别忘了续展，新注可能难下证！

已注册的商标别忘了续展，新注可能难下证！

近期普推知产老杨遇到好几个网友和看过多个案例&#xff0c;以前商标名称可以申请注册下来&#xff0c;但是换字体注册不下来了&#xff0c;有的是不想续展想直接换字体申请注册&#xff0c;但是也没有下来。 这些商标名称主要是存在禁止注册或缺显&#xff0c;比如“柳林”以前…
阅读更多...
新手如何去做性能测试？

新手如何去做性能测试？

1、性能测试是什么&#xff1f; 一句话概括&#xff1a;不断的通过不同场景的系统表现去探究系统设计与资源消耗之间的平衡。 具体一点&#xff1a;通过在测试环境下对系统或构件的性能进行探测&#xff0c;用以验证在生产环境下系统性能是否达到预估的性能需求&#xff0c;发…
阅读更多...
C++：单行注释和多行注释（2）

C++：单行注释和多行注释（2）

注释是什么&#xff1a;在们写代码的时候&#xff0c;往往光靠理解去看代码&#xff0c;是效率非常低的&#xff0c;这时我们就可以使用注释对代码进行一个解读&#xff0c;即使后期别人拿了你的代码&#xff0c;他通过看注释就可以快速理解你的代码的意思&#xff0c;在执行代…
阅读更多...
基于MATLAB的模糊神经网络预测水质评价

基于MATLAB的模糊神经网络预测水质评价

%% 学习目标&#xff1a;模糊神经网络预测水质评价 %% 更多matlab精彩专题课程和案例&#xff0c;可以搜索微信公众号&#xff1a;电击小子程高兴的MATLAB小屋 %% 清空环境变量 clc clear%% 参数初始化 xite0.001; alfa0.05;%% 网络节点 I6; %输入节点数 M12; %隐含节点数…
阅读更多...
【tingsboard开源平台】环境准备和安装

【tingsboard开源平台】环境准备和安装

文章目录 环境准备:1.安装JAVA2.安装maven环境3.安装nodeJS(16.15.1)4.安装git环境5.安装npm依赖关系6.放入文件fetched7.安装IDEA 环境准备: 1.安装JAVA 以安装java11为例&#xff0c;安装tingsboard需要的jdk 下载地址&#xff1a;https://www.oracle.com/java/technologi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023