hexo快速搭建博客

最新推荐文章于 2024-07-26 22:01:32 发布
最新推荐文章于 2024-07-26 22:01:32 发布
阅读量320 收藏
点赞数
分类专栏： 笔记 文章标签： 前端
风
本文链接：https://blog.csdn.net/qq_46137324/article/details/124029707
版权

1. Git安装

GIF 2022-4-5 14-43-44

选择好安装的位置之后, 一直next下一步(可以根据自己的需求勾选配置).

2. Node.js安装

GIF 2022-4-5 14-46-42

选择好安装的位置之后, 一直next下一步(可以根据自己的需求勾选配置).

3. 安装hexo

使用命令行进行安装.
以管理员权限打开命令提示符.

image-20220405172052245

* 1. 更换Node NPM服务器的地址
npm config set registry https://registry.npm.taobao.org

* 2. 查看hexo的信息
npm info hexo

image-20220405144939068

* 3. 使用 npm 安装 Hexo。
npm install -g hexo

image-20220405145044368

* 4. 在D盘的hexo下建立一个hexo_file目录, 切换到 hexo_file目录下, 在命令提示符里输入安装hexo资源.

hexo init home  # hexo init 新建一个网站 指定目录为 home, 也称为初始化
cd home  
npm install  # Hexo 将会在指定文件夹中 新建所需要的文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SR898iaS-1649345605057)(https://s2.loli.net/2022/04/05/Z2HNh7bcAfgrWK8.png)]

新建完成后，指定文件夹的目录如下：
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
4. 启动测试 hexo
* 1. 清除所有记录
hexo clean

image-20220405151808350

* 2. 生成静态网页
hexo generate

image-20220405151629127

* 3. 启动服务
hexo server -p 80

启动后终端不能关闭，否则网站无法访问.
测试完成后，Ctrl + C 即可关闭.
在浏览器中输入: http://localhost:80

image-20220405152023972

image-20220405152631382

5. 配置SSH免密码登陆

* 1.打开 Git Base, 先查看本地是否存在私钥.
ls ~-.ssh

image-20220405153051180

* 2. 不存在则创建 SSH key
ssh-keygen -t rsa -C"Gitee的注册邮箱"

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CXnb5iee-1649345605061)(C:/Users/13600/AppData/Roaming/Typora/typora-user-images/image-20220405153424695.png)]

* 3. 最终生成的文件默认位置在 C:\Users\电脑用户\.ssh\下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oJASRvE5-1649345605062)(C:/Users/13600/AppData/Roaming/Typora/typora-user-images/image-20220405153524645.png)]

* 4. 命令行中测试 SSH 连接
ssh -T git@gitee.com

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7GhZtjhG-1649345605062)(C:/Users/13600/AppData/Roaming/Typora/typora-user-images/image-20220405153750901.png)]

* 5.复制 id_rsa.pub文件的内容配置Gitee的ssh密钥

image-20220405154141640

image-20220405154327043

image-20220405154337308

6. 创建仓库

image-20220405175527445

image-20220405155011013

路径		   创建一个二级路径
介绍		   随便写点东西
主页		   不写
语言		   不选
默认分支      master
是否开源      开源
仓库公开须知  全选

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hx3KQ6m8-1649345605066)(C:/Users/13600/AppData/Roaming/Typora/typora-user-images/image-20220407125000187.png)]

image-20220407124920223

7. 代码上传到仓库

* 1. 配置 Hexo项目下的_config.yml文件, 
    url地址
    部署type和repo属性

url: https://python_21.gitee.io/
deploy:
  type: git
  # 仓库的地址
  repo: https://gitee.com/python_21/python_21
  # 分支的地址
  branch: master

image-20220407230214504

image-20220407230225783

*. git全局设置
git config --global user.email '邮箱'
git config --global user.name '用户名'

image-20220405155410733

* 3. 使用Git命令安装Hexo-Git 插件
npm install hexo-deployer-git --save

image-20220405155931233

* 4. 上传到Gitee (重新生成页面再上传)
hexo clean && hexo g && hexo deploy

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rxdlBJuT-1649345605068)(C:/Users/13600/AppData/Roaming/Typora/typora-user-images/image-20220405160057313.png)]

image-20220405160021970

* 5. 许可协议

image-20220407231004707

image-20220407231019531

* 6. 随便选一个

image-20220407231105832

image-20220407231124890

* 7. 部署网页

image-20220407231255542

* 8. 每个上传到gitee都要更新

image-20220407231348553

8. 站点配置

8.1 配置说明
有些配置需要重启启动服务器才能生效.
1. Ctrl+C 先停止当前服务.

2. hexo clean && hexo g && hexo s

clean 清除
g --> 生成静态网页
s --> 启动服务

如果出现乱码的情况, 文件编码使用UTF8

8.2 标题设置
hexo的配置文件_config.yml

# Site
# 标题
title: Python
# 小标题
subtitle: 知行而一
# 描述
description: 逆水行舟, 不进则退!
# 关键字, 搜索引擎通过这个关键字来查找这个站点
keywords: Python
# 作者
author: Python_21
# 时区
timezone: ''
8.3 语言配置
hexo的配置文件_config.yml

# 语言设置 中文
language: zh-CN
8.4 主题下载
主题: https://hexo.io/themes/
点击图片预览主题, 点击标题进入下载地址, 进入到github.com的仓库中.
将下载好的主题复制到hexo站点目录的themes中, 在站点配置文件中搜索theme 设置值为主题包的名字

image-20220406080930547

1. 在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码：
$ cd 切换到自己的站点目录
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

2. 启用主题, 打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。
theme: next

3. 重启服务验证

image-20220406082231751

8.5 设置菜单
设定菜单内容，对应的字段是 menu。

# 设置 菜单
menu:
  # 主页
  home: / || fa fa-home
  # 分类
  categories: /categories/ || fa fa-th

  # 标签
  tags: /tags/ || fa fa-tags
  
  # 文章
  archives: /archives/ || fa fa-archive
  
  # 关于
  about: /about/ || fa fa-user

image-20220406083518818

现在新创建的菜单点击是无效的还需要创建$绑定对应的页面.

image-20220406084213215

hexo项目\source 下打开终端创建四个页面

# 创建分类
hexo n page categories
# 创建标签
hexo n page tags
# 创建文章
hexo n page archives
# 创建关于
hexo n page about

image-20220406084524703

每个页面的创建对应一个目录, 现在就可以点击后创建的菜单了

GIF 2022-4-6 8-47-03

每个目录下有一个index.md文件

image-20220406084909885

修改每个菜单对应index.md文件
title 标签
data 创建时间
type 类型, 菜单分类的依据

标签菜单
title: 标签
data: 2019-08-06 09:44:50
type: tags

分类菜单
title: 分类
data: 2019-08-06 09:44:51
type: categories

归档菜单
title: 归档
data: 2019-08-06 09:44:52
type: archives

关于菜单
title: 关于
---
顺便写点东西

GIF 2022-4-6 8-59-02

8.6 主题设定
# Schemes 主题设定
# Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
# Mist - Muse 的紧凑版本，整洁有序的单栏外观
# Pisces - 双栏 Scheme，小家碧玉似的清新
# Gemini -- 与Pisces相似 

scheme: Gemini

image-20220406095711391

8.7 设置头像
编辑 主题配置文件， 修改字段 avatar， 值设置成头像的链接地址

avatar:
  url: https://s2.loli.net/2022/04/06/BrfLtIsDlRUyiwq.jpg

image-20220406100354344

8.8 侧边栏链接
侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。 两者配置均在 主题配置文件 中

# Social links 链接
# 社交链接
social:
  GitHub: https://github.com/kid21z || fab fa-github
  E-Mail: 1360012768@qq.com || fa fa-envelope

# Social Icons 链接图标
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  微博: weibo
8.9 友情链接
编辑 主题配置文件links

# title
links_title: 友情链接
links:
  CSDN: https://www.csdn.net/
  博客园: https://www.cnblogs.com/

9. 文章配置

9.1添加存在的文章
文章使用Typora写好的, 将文章复制到_post目录中

image-20220406112354312

文章编辑信息.
title: 标题
data: 创建时间
# 为文章设置标签
tags:
	# 标签的名字
	- python
	- python 基础
	
# 为文章分类
categories:
  # 分类的名字
  - 后端
----------------

image-20220406112925267

9.2 首页文章展示
默认是展示所有的文章的, 在文章中设置<!--more-->, 展示文章的一部分.

image-20220406131014014

9.3 打赏
每篇文章末尾出现打赏功能

reward_settings:
  # If true, a donate button will be displayed in every article by default.
  # 开启打赏
  enable: True
  animation: false
  comment: 您的打赏是我创作的动力!

reward:
  # 微信
  wechatpay: https://s2.loli.net/2022/04/06/qbuldGEvIgJ1OP6.png
  # 支付宝
  alipay: https://s2.loli.net/2022/04/06/Bu3YVfMm4LNSQ1k.png

image-20220406120812228

10. 博客右上角github

next\layout\_layout.njk

<a href="https://github.com/kid21z" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

在body标签内添加

image-20220406133551321

image-20220406133704077

11. 底部标签图标

修改 next\layout\_macro\post.njk 文件
可以去 http://www.fontawesome.com.cn/icons/tag/ 寻找一个自己喜欢的图标.

<!--打开文件后搜索 class="post-tags" -->
<div class="post-tags">
    {%- for tag in post.tags.toArray() %}
    <a href="{{ url_for(tag.path) }}" rel="tag"> {{tag_indicate}} {{ tag.name }}</a>

<!--修改之后-->
<div class="post-tags">
    {%- for tag in post.tags.toArray() %}
    <a href="{{ url_for(tag.path) }}" rel="tag"> <i class="fa fa-tag" aria-hidden="true"></i> {{ tag.name }}</a>
    {%- endfor %}
</div>

image-20220406215049169

12.评论

image-20220406220421296

image-20220406220929764

image-20220406221026018

leancloud_visitors:
  enable: True
  app_id: xxx
  app_key: xxx

image-20220406221144920

image-20220406221726024

image-20220406222619754

13. 页面所有滚动条

themes\Matery\source\css\matery.css样式添加如下：

/* 滚动条 */
::-webkit-scrollbar-thumb {
    background-color: #FF2A68;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    border-radius: 3em;
}
::-webkit-scrollbar-track {
    background-color: #ffcacaff;
    border-radius: 3em;
}
::-webkit-scrollbar {
    width: 8px;
    height: 15px;
}

image-20220407174406006

添加在文件的尾部
开局签到Python基础
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用 Hexo 快速免费搭建个人网站
克隆窝
11-15 939
使用 Hexo 快速免费搭建个人网站本文档教你如何快速使用hexo + Github Pages / Gitee Pages 免费搭建一个个人网站。首先你需要准备一台 Win7 或者 Win10 系统的电脑。并成功注册 Github 或者 Gitee 的账号(任意一个就行。或者两个都用)。Github官网:Gitee官网:注册好账号后就可以进行下一步骤了。Github Pages是支持页面自动更新的，后续如果上传了新内容，页面就会自动刷新，无需再设置。
hexo 快速搭建个人博客
Z2Min_
04-19 205
目录 环境准备 本地搭建 部署至GitHub 自定义主题 预览 环境准备 node.js Git 首先在开始之前，要确保电脑上已经安装有 node.js 和 Git。 OK！安装完之后，我们来查看一下是否都安装成功： 任意空白处 右键 打开Git Bash Here 进入Git命令界面 node -v；npm -v ：查看node.js 是否安装成功 这里我们再安装一...
HEXO快速搭建自己的博客
程序员哆啦A梦，蓝胖子
01-29 541
关注我，每天都有优质技术文章推送，工作，学习累了的时候放松一下自己。 本篇文章同步微信公众号 欢迎大家关注我的微信公众号：「醉翁猫咪」 很多人有自己的博客，那么你想要吗？利用Hexo就可以搭建专属自己的博客了。特点是Hexo是静态网站，那么下面教大家如何搭建。 一：下载Git：https://git-for-windo
解决 hexo init 失败问题
最新发布
无边热爱，来日方长
07-26 516
解决 hexo init 失败问题 问题描述 准备使用 hexo 搭建个人博客，执行 hexo init 后失败，错误内容为： INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git fatal: unable to access 'https://github.com/hexojs/hexo-starter.git/': Failed to connect to github.com port 443 after 2108
Hexo-快速搭建个人博客
Hager930的博客
01-07 154
通过修改官方提供的hexo模板，搭建自己的个人博客。 文章目录Windows安装Node.js检验设置淘宝源Windows安装GitHexo安装博客初始化注册Github账号修改模板参考 Windows安装Node.js 参考：Windows 安装 Node.js 检验 Node.js安装完成后，cmd窗口输入： node -v npm -v 出现版本标识，说明安装成功 设置淘宝源 永久设置淘宝...
hexo博客快速搭建
一步一个jio印
02-18 298
博客搭建有很多框架与工具可以选用，我选择了耳熟能详的hexo，个人比较喜欢 2020.1.18 第一步：安装hexo运行环境node.js 直接在node.js官网下载安装。 安装之后输入 node -v和npm -v能查看版本则安装成功。 第二步：安装hexo基本框架 第一步：下载hexo npm是node.js上的包管理器，需要用到npm下载hexo，但速度太慢了。先使用npm安装国...
Vercel + Github + Hexo 快速搭建博客
X同学的博客
05-11 2345
使用Vercel + Github + Hexo 快速搭建博客，域名可以使用Vercel的免费域名
个人博客系统-前后端,基于hexo搭建
10-19
本文将深入探讨如何使用Hexo框架来搭建这样一个个人博客系统，并强调其自定义模板的特点。 Hexo，一款轻量级的静态博客框架，以其简洁、高效和易于上手的特点，受到了众多用户的喜爱。它基于Node.js，能够快速生成...
使用Hexo免费搭建个人博客教程
csdnxia的博客
10-18 2956
前言 现在各种互联网博客非常的，常见的如CSDN、简书、掘金、博客园等平台，这些博客平台做的都很好，可以直接在上面注册自己的账号写文章，发表的文章在百度、Bing等搜索引擎上也能收到，但缺点是受于平台的各种限制，个人定制化不自由，而且大多数平台都会有各种广告。 于是想到自己搭建一个博客网站，但对大多数人而言，自己购买服务器和域名来搭建博客成本实在太高的了，而且有点浪费，还需要定期维护，这时一种不错的选择就是使用第三方开源托管平台（GitHub、GitLab等）来当作我们的服务器，并使用快速简洁的博客搭建框架
基于Hexo搭建的博客系统源码.zip
11-02
Hexo是一款快速、简洁且高效的静态博客框架，它使用Markdown语法编写内容，通过简单的配置即可生成静态网页。基于Hexo搭建的博客系统源码.zip文件包含了一整套用于创建个人博客的源代码，使得用户可以自定义自己的...
Hexo博客搭建文件（next主题）
12-07
Hexo博客搭建是一个深受开发者喜爱的过程，它是一个基于Node.js的快速、简洁且高效的博客框架。在本案例中，我们关注的是使用Next主题来构建个人博客。Next主题以其优雅的设计和丰富的功能，成为Hexo用户中的热门...
youlai-boot: Spring Boot 3 + Spring Security + Vue3 权限管理系统
05-04
youlai-boot 是【有来开源组织】基于Spring Boot 3 + Spring Security 6 + JWT + Mybatis-Plus + Redis + XXL-Job + Vue3 等主流技术栈搭建的前后端分离权限管理系统。 在线预览地址：http://vue3.youlai.tech 后端仓库源码：https://gitee.com/youlaiorg/youlai-boot 前端仓库源码：https://gitee.com/youlaiorg/vue3-element-admin 项目特色： 1. Spring Boot 3.0 + Vue3 前后端分离单体应用，适合快速开发； 2. Spring Security + JWT 认证鉴权方案； 3. 基于 RBAC 模型的权限设计，细粒度接口方法、按钮级别权限控制。
HEXO快速博客搭建
weixin_50369190的博客
09-14 233
新手hexo快速搭建博客 pm2管理后台一直运行
使用Hexo快速搭建个人博客
小哲数据
01-21 730
作为一枚程序猿，可以通过写博客对最近一段时间工作和学习进行总结，同时也了提高表达能力。更重要的是在分享过程中，可以结交一些朋友，所以最近打算搭建一个博客网站。通过调研，使用Hexo(基于node.js的静态博客框架)+Github.io(用于部署网站的空间资源)可快速部署博客网站。本文基于MacOS环境搭建,自带Git,所以不需要再下载安装。 申请GitHub并创建相应的代码仓库 He
基于Hexo快速搭建个人博客网站
一半的博客
12-26 476
网站示例：与李的个人博客 一、搭建GithubPages 1、在GitHub上创建一个名为"yourname.github.io"的仓库 如我的GitHub账户名称为hanguilin，那么我就需要创建一个名为hanguilin.github.io的仓库 2、进入仓库，进入Settings 找到GitHub Pages 第一部分是个人主页访问地址，初始化应该为http://yourname.github.io。 第二部分是表示网站根目录/与gh-pages分支进行关联。 第三部分是选择GitHub自.
Github+Hexo快速搭建个人博客
weixin_46322986的博客
01-15 937
快速安装Hexo并使用Github部署，解决图片上传问题与域名绑定
【开源博客】三个步骤学会Hexo快速生成精美博客！
持续学习持续开发，我是雷学委！
09-30 5237
> 最近学委跟小伙伴搞了一个py4ever 开源站点，使用的就是hexo。 下面是站点信息：[py4ever开源站](https://py4ever.github.io/) 它就是基于hexo来生成的，当然做了一些定制。 **这次，学委会一步一步的指导大家建立一个博客站。** # 什么是hexo > hexo 是一款博客生成工具，它基于Markdown语法的博客生成。 hexo它也发行了基于NodeJS的cli库（命令行工具），在npm上面可以查找到，下面进入安装。 **可以简单理解，它就是一
hexo博客2：初始化
定期分享我的发现和想法，感谢你的陪伴和支持
05-20 5713
hexo博客2：初始化一、初始化二、生成静态网页三、报错解决3.1 报错一3.2 报错二四、版本1.0页面展示 由于已经有hexo博客了，因此初始化博客部分直接复制的之前笔记。 一、初始化 输入hexo init初始化文件夹 hexo init Blog 这是因为服务器的SSL证书没有经过第三方机构的签署，所以才报错 解决办法: git config --global http.sslVerify "false" 输入npm install安装必备的组件。 cd MyBlog //进入这个
快速搭建Hexo博客全攻略
"Hexo博客网站的快速搭建" Hexo是一个基于Node.js的快速、简洁且高效的博客框架，它使用Markdown或者其他渲染引擎解析文章，并能够迅速生成静态网页，提供多种美观的主题供用户选择。通过简单的配置和操作，用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值