ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

github+hexo+butterfly搭建属于自己的博客

2022-03-01 18:32:05  阅读:223  来源: 互联网

标签:butterfly md github hexo nano 博客 source


前言:这是一篇萌新级的文章,作者也是一个萌新,由于网上完整教程似乎较少,故出此文章
阅读此文,您需要熟练使用复制粘贴,建议一步一步来,否则可能出错
作者亦不能保证这篇文章完全正确
最终效果就是这一个网站了

0x0001 前期准备

环境准备

建议使用linux环境,手机端可以使用termux,windows上用wsl
编辑器建议使用nano
安装wget
有一个魔法工具

账号设置

申请一个github账号
去settings--developer-settings--token创建一个令牌,打勾时全选 上就行,然后复制令牌
创建一个存储库,命名为:你的Github名字.github.io

安装nodejs

这不是重点,就不多说了(逃...
前往nodejs.org下载适用于你的系统的安装包,或者直 接用系统里的apt,pacman等包管理器安装

安装git

系统里安装上git和github-cli
执行:

gh auth login

敲两下回车,粘贴进去你的token然后回车
然后执行:

git config --global user.email "你的电子邮件地址"
git config --global user.name "你的github用户名"

0x0002 部署一个hexo博客

cd ~
mkdir hexo
npm install -g hexo
cd hexo
hexo init
npm install hexo-theme-butterfly hexo-renderer-pug hexo-renderer-stylus cheerio hexo-deployer-git  --save

0x0003 编辑网站配置文件

cd ~/hexo
nano _config.yml

按照您的需要更改以下内容:

title: 网站标题
subtitle: 网站子标题
description: 网站描述
keywords:
    - 关键字
    - 关键字
author: 你的名字
language: zh-CN
url: 你的网站地址
theme: butterfly
deploy:
  type: git
  repository: 你的github仓库地址,如https://github.com/xxxx/xxxx.github.io

0x0004 配置主题

rm ~/hexo/node_modules/hexo-theme-butterfly/_config.yml
cd ~/hexo/node_modules/hexo-theme-butterfly/
wget https://github.com/Moe-hacker/moe-hacker.github.io/raw/master/resources/_config.yml

然后:

nano ~/hexo/node_modules/hexo-theme-butterfly/_config.yml

将配置文件中的Moe-hacker替换成你的github名字
将subtitle:中的sub里的内容替换为你想要的句子
准备一张背景图片,放置在hexo/public,命名为background.png
准备一张你的头像,放置在hexo/public,命名为face.jpg

0x0005 配置链接

hexo new page link
hexo new page tags
hexo new page categories
hexo new page about

然后:

友链:

nano ~/hexo/source/link/index.md

加入以下内容到两个横线中间:

type: "link"

标签页:

nano ~/hexo/source/tags/index.md

加入以下内容到两个横线中间:

type: "tags"

分类页:

nano ~/hexo/source/categories/index.md

加入以下内容到两个横线中间:

type: "categories"

关于页:

nano ~/hexo/source/about/index.md

加入以下内容到两个横线中间:

type: "about"

横线下面是你的网站介绍,出现在关于页面里

配置友链:

mkdir -p ~/hexo/source/_data
nano ~/hexo/source/_data/link.yml

示例:

- class_name: 友情链接
  class_desc: 那些人,那些事
  link_list:
    - name: Moe-hacker
      link: https://moe-hacker.github.io
      avatar: /face.jpg
      descr: 萌系黑客的博客

0x0006 效果预览

cd ~/hexo
hexo g
hexo s

浏览器访问http://localhost:4000/ ,可以看到我们的博客已经建好 了

0x0007 开始写博客

rm /hexo/source/_posts/hello-world.md
hexo new 你的第一篇博客
nano /hexo/source/_posts/你的第一篇博客.md

注:如何添加封面
在你的md文件中的两个横杠中添加:

top_img: 头图链接
cover: 封面链接

如何添加标签:
在你的md文件中的两个横杠中添加:

tags:
    - 标签
    - 标签

0x0008 markdown语法学习

内容过多了,自己百度去吧(咕咕咕...

0x0009 博客部署

cd ~/hexo
hexo g
hexo d

过两分钟,访问你的站点,可以看到博客已经建好了

标签:butterfly,md,github,hexo,nano,博客,source
来源: https://www.cnblogs.com/Moe-hacker/p/15951763.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有