当前位置:   article > 正文

Hexo+Github博客搭建_cyanstyle

cyanstyle

前言:

基于Hexo+Github搭建的博客教程

工具:

1 初始化博客

新建blog文件夹,进入文件夹,Git Bash Here

# 安装 hexo 框架
npm install -g hexo-cli
# 初始化文件夹
hexo init
# 安装 hexo 依赖包
npm install
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

博客框架搭建完成后,继续执行

# 生成静态网站
hexo g
# 启动服务器
hexo s
  • 1
  • 2
  • 3
  • 4

2 美化主题

themes

在 Hexo 博客根目录(…\blog)下,右键,选择Git Bash Here,执行下面命令:

git clone https://github.com/wizardforcel/hexo-theme-cyanstyle.git themes/cyanstyle
  • 1

打开博客根目录下的 _config.yml,找到theme标签,默认值是landscape主题,把它改为要更换的主题名字cyanstyle,然后执行启动命令。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: cyanstyle
  • 1
  • 2
  • 3
  • 4
# 清理 && 生成 && 启动
hexo clean && hexo g && hexo s
  • 1
  • 2

cyanstyle

安装

git clone https://github.com/wizardforcel/hexo-theme-cyanstyle.git themes/cyanstyle
  • 1

修改 Hexo 的 _config.yml 中的 themecyanstyle

升级

cd themes/cyanstyle
git pull
  • 1
  • 2

配置

默认的_config.yml文件:

# Header
menu:
  Home: /
  Archives: /archives

# Content
excerpt_link: More
prev: Prev
next: Next
reply: Reply
share: Share
fancybox: true

# Sidebar
widgets:
- search
- music
- category
- recent_posts
- tag
- tagcloud

# Miscellaneous
google_analytics:
duoshuo_shortname: 
rss: 
google_site_verification: 
baidu_site_verification: 
favicon: 
music: 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • menu - 导航栏的菜单,键值对形式,键为文字,值为连接
  • widgets - 侧栏上的小工具,一行一个
  • duoshuo_shortname - 站点的多说ID,可选
  • fancybox - 是否开启 jQuery 弹出层效果
  • google_analytics - Google Analytics ID ,可选
  • rss - rss 订阅链接,可选
  • google_site_verification - 用于谷歌站长工具验证所有权的ID,可选
  • baidu_site_verification - 用于百度站长工具验证所有权的ID,可选
  • favicon - 用于在浏览器标签上显示的图标,可选,如果不指定则会加载默认图标
  • music - 侧栏上的播放器音乐,如果不指定音乐组件将不会显示

ayer

# 下载主题仓库到 themes 文件夹, git clone <仓库地址> themes/<主题名> 
git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer
  • 1
  • 2

更新主题

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: ayer
  • 1
  • 2
  • 3
  • 4

清理 生成 启动

# 清理 && 生成 && 启动
hexo clean && hexo g && hexo s
  • 1
  • 2

修改博客基本信息

# Site
title: NetTree
subtitle: ''
description: ''
keywords:
author: Cyan Chau
language: en
timezone: ''
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

打开 ayer 主题的`主题配置文件; 修改第 2 ~ 10行,关掉不需要的侧边栏

menu:
  主页: /
  归档: /archives
  分类: /categories
  标签: /tags
 # 旅行: /tags/旅行/
 # 摄影: http://shenyu-vip.lofter.com
 # 友链: /friends
  关于我: /2023/about
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

修改第 14 ~ 18行,自定义首页滚动显示的标题。

subtitle:
  enable: true # 是否开启动效
  text: Welcome to NetTree
  text2: It's OK to be yourself, why care about the opinions of others.
  text3: I have the good heart of the Xi, although nine still not regret.
  • 1
  • 2
  • 3
  • 4
  • 5

修改第 26 ~ 27行,修改网站图标和侧边栏logo。只需要把自己的图标文件按覆盖原来的文件,完整目录为‪\blog\themes\ayer\source\favicon.ico。

# 浏览器标签栏显示图标
favicon: /favicon.ico 
# 首页侧边栏图标
logo: /favicon.ico
  • 1
  • 2
  • 3
  • 4

修改封面

cover:
  enable: true
  path: /images/cover8.jpg
  logo: false
  • 1
  • 2
  • 3
  • 4

第 125 行,关闭右上角的 GitHub forkme

github:
  # (关闭请设置为false)
  enable: false
  url: https://github.com/Shen-Yu/hexo-theme-ayer
  • 1
  • 2
  • 3
  • 4

第 83 行,关闭打赏

reward_type: 0

  • 1
  • 2

改完后,执行hexo g && hexo s,刷新网页看下效果: 改完后,执行hexo g && hexo s,刷新网页看下效果:

3 撰写文章

新建文章

在博客根目录下右键,选择Git Bash Here,输入下面命令

hexo new "博客搭建教程"
  • 1

此时先 Ctrl + C 停止服务器,执行hexo g && hexo s重新部署,刷新http://localhost:4000/,可以看到博客上多了一篇文章。

修改模板


title: 博客搭建教程
date: 2023-02-11 17:59:39
tags:


这就需要修改根目录配置文件(‪\blog_config.yml)的new_post_name参数了,其中year month day 分别表示创建文章的年月日,这样,再新建文章时,文件名将会自动加上年月日信息,便于通过日期来管理文章。当然,这个时间后面也是可以修改的。

new_post_name: :year-:month-:day-:title.md
  • 1

此时先 Ctrl + C 停止服务器,执行hexo g && hexo s重新部署,刷新http://localhost:4000/,看看效果。

4 发布博客

新建Cyanzzy.github.io 仓库

配置 Git 参数

在博客根目录下,右键,打开Git Bash Here。

配置用户名和邮箱,这两个参数用于 Git 提交时的身份识别。

# 其中 username 和 username@XXX.com 是你注册 GitHub 的用户名和邮箱
git config --global user.name "username"
git config --global user.email "username@XXX.com"
  • 1
  • 2
  • 3

生成 SSH keys,主要用于Git 提交时的权限控制和加密,本地根据 RSA 算法生成公私密钥对,然后将公钥添加到 GitHub 上,本机就可以提交代码到自己的 GitHub 库了。这个是根据当前使用的电脑的一些信息生成的,所以换电脑提交时要重新生成并添加

输入下面命令,然后一直按回车,直到结束。

# 其中 username@XXX.com 是你注册 GitHub 的邮箱
ssh-keygen -t rsa -C "username@XXX.com"
  • 1
  • 2

开自己的 Github 主页,点击右上角的头像,点击Settings,配置SSH公钥

安装 Hexo 发布插件

在博客根目录下,右键,打开Git Bash Here。

输入下面的命令,安装hexo-deployer-git

个插件用于把生成好的静态页面上传到 GitHub Pages 仓库。

npm install hexo-deployer-git
  • 1

准备发布

打开博客根目录配置文件(D:\MyBlog_config.yaml),拉到文件最后一行,修改为下面的配置(没有的配置项自行添加),保存。

# 其中 xxxxxx 是前面多次用到的你的GitHub用户名
deploy:
  type: git
  repo: git@github.com:xxxxxx/xxxxxx.github.io.git
  branch: main
  • 1
  • 2
  • 3
  • 4
  • 5

执行命令

# 注意最后变成d了,原来的s表示服务起在本地,现在的d表示部署在远端
hexo g && hexo d
  • 1
  • 2

参考文章

从零开始免费搭建自己的博客(一)——本地搭建hexo框架

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/702053
推荐阅读
相关标签
  

闽ICP备14008679号