首页 > 其他分享 >搭建博客 (Hexo + github + butterfly主题)

搭建博客 (Hexo + github + butterfly主题)

时间:2024-06-09 10:22:26浏览次数:23  
标签:butterfly git Hexo hexo 博客 github config yml

1、下载安装Nodejs

node -v
npm -v

2、安装淘宝镜像cnpm管理器

npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm -v 

3、安装hexo框架

cnpm install -g hexo-cli
hexo -v

4、安装git (若有github账号可直接跳过本条)

git使用前配置:
下载完git后,需要告诉 git 你是谁,在向 git 仓库中提交时需要用到。

1、配置提交人姓名:git config --global user.name 提交人姓名
2、配置提交人姓名:git config --global user.email 提交人邮箱
3、查看git配置信息:git config --list

5、使用hexo搭建博客 (git bash/shell 打开)

5.1 在指定位置创建文件夹,初始化hexo

mkdir blog  #创建blog目录
cd blog   #进入blog目录
hexo init  #生成博客 初始化博客
hexo s  /  hexo server  #启动本地博客服务

初始化之后,ls -al 查看可得文件
_config.landscape.yml db.json package.json public/ source/ yarn.lock
_config.yml node_modules/ package-lock.json scaffolds/ themes/

其中 _config.yml 是配置文件
themes/ 存放博客主题

5.2 创建post

hexo new "我的第一篇博客文章"

cd source/_posts
ls -al
可查看所有的.md文件

5.3 编辑博客文章内容

vim 我的第一篇博客文章.md
编写格式遵循markdown格式

5.4 进入创建博客目录blog的主目录,执行清理工作,再执行生成工作

ls   (查看在_posts目录)
cd ../..  
pwd 
hexo clean 
hexo g  /  hexo generate   #生成发布用的静态页面,存在public文件中

生成工作完成后,会出现目录 ......../我的第一篇博客文章/index.html

5.5 重新启动

hexo s  

至此,博客仅在本地localhost:4000启动,但是若需要可被远程访问,
接下来可部署到github来公开使用

6、github创建博客仓库

6.1 进入github,创建Repository 空仓库

注意:Repository name 命名格式为 (owner).github.io
必须是自己的github用户名.github.io

比如 : 
    Owner : sjbhz
    Repository name : sjbhz.github.io

6.2 进入command/bash窗口,在创建的blog目录下安装一个git 部署插件

cnpm install --save hexo-deployer-git

6.3 设置_config.yml配置文件

vim _config.yml

_config.yml配置文件中:
    #Deployment
    ##Docs: https://hexo.io/docs/deployment.html
    deploy:
        type: git
        repo: https://github.com/sjbhz/sjbhz.github.io.git
        branch: master

配置好,保存退出

6.4 将博客部署到远端

hexo deploy / hexo d
输入账号密码

6.5 刷新创库,访问 sjbhz.github.io

7、更换主题

打开butterfly网站  https://butterfly.js.org/posts/21cfbf15/

7.1 下载主题

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

7.2 修改配置

修改站點配置文件_config.yml,把主題改為butterfly

_config.yml配置文件中:
    theme: butterfly

7.3 进行清理,再重新生成,部署,再推送上传至github

hexo clean 
hexo g
hexo s  
hexo deploy

补充:

换主题时报 extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug 

解决:

在hexo目录下打开git bash,输入命令:

npm install –save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

8、Hexo增加搜索功能

8.1 安装搜索:在Hexo的根目录下

npm install hexo-generator-searchdb --save

8.2 全局配置文件_config.yml,新增

search:
    path: search.xml
    field: post
    format: html
    limit: 10000

8.3 hexo主题配置文件(\themes\next_config.yml),修改local_search的enable为true

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
    enable: true
    # if auto, trigger search by changing input
    # if manual, trigger search by pressing enter key or search button
    trigger: auto
    # show top n results per article, show all results by setting to -1
    top_n_per_article: 1

我的博客:搭建博客 | Keep Going, Keep Down (sjbhz.github.io)

标签:butterfly,git,Hexo,hexo,博客,github,config,yml
From: https://www.cnblogs.com/sjbhz/p/18239319

相关文章

  • GitHub飙升!京东认证的“Python编程入门三剑客”究竟好在哪?
    Python凭借着简单易学、功能强大,已经跃居TIOB编程语言榜首,并且已经开始了它的霸榜之旅。如何选择一套适合自己的Python学习教程,是每个Python爱好者面临的首要问题。今天给小伙伴们带来的是图灵&京东认证的“Python编程入门三剑客”,先看《Python编程从入门到实践》,打好Python入......
  • GitHub狂揽6700 Star,Python进阶必备的案例、技巧与工程实践
    当下是Python急剧发展的时代,越来越多的人开始学习和使用Pyhon,而大家也遇到了各种问题。这份手册清晰、细致地介绍了Python代码应该遵循的编程风格,并解释了背后的原理和机制。入门Python语言相对简单,但写出优雅的代码并非易事。这份手册深入讲解了Python进阶知识的方方......
  • 开山之作!Python数据与算法分析手册,登顶GitHub!
    若把编写代码比作行军打仗,那么要想称霸沙场,不能仅靠手中的利刃,还需深谙兵法。Python是一把利刃,数据结构与算法则是兵法。只有熟读兵法,才能使利刃所向披靡。只有洞彻数据结构与算法,才能真正精通Python。今天给小伙伴们分享的这份手册,是用Python描述数据结构与算法的开山之作,......
  • GitHub Pages托管Vue3+Vite项目
    前面都没有问题的兄弟,可以直接跳到第七步一、创建一个Vue3+Vite项目并运行1.创建npmcreatevue@latest可以根据自己的需求进行选择2.安装依赖npmi3.运行npmrundev二、修改vite.config.js文件在此文件中,defineConfig中加入base参数,具体如下:exportde......
  • Github Discussions使用指南(建议收藏)
    序言之所以想着翻译这篇文章,是因为我看到国内不管是开源爱好者,还是开发者都不怎么了解GithubDiscussions,以致于在Github仓库中提问时,总是忘记使用这个好东西,或者问错地方。翻译自:WhatisGitHubDiscussions?Acompleteguide引言GitHubDiscussions可将社区论坛直接......
  • Github Fork仓库的冲突与同步管理
    在使用Github进行协作开发时,fork一个仓库并在本地进行开发是常见的工作流程。然而,当源仓库(上游仓库)有了更新时,如何同步这些更新并解决可能的合并冲突是一个关键问题。本文将详细介绍如何管理这些操作。步骤一:Fork并克隆仓库首先,fork你感兴趣的源仓库,并将其克隆到本地:gitclon......
  • GitHub 常用操作与常用命令——GitHub入门,看这一文就够了
    文章目录GitHub常用操作in关键词限制搜索范围:stars或fork数量关键词查找:awesome加强搜索:高亮显示某一行的代码:项目内搜索:显示快捷键:Git常用命令初始化命令查看当前git配置信息:设置提交代码时的用户信息在当前目录新建一个Git代码库下载一个项目和它的整个代码版本与......
  • 如何解决 Docker Compose文件无法拉取:解决运维技术领域的Bug :Failed to pull Docker C
    如何解决DockerCompose文件无法拉取:解决运维技术领域的Bug:FailedtopullDockerComposeYAMLfilefromGitHubrepository原创作者:猫头虎作者微信号:Libin9iOak作者公众号:猫头虎技术团队更新日期:2024年6月6日博主猫头虎的技术世界......
  • 一周万星的文本转语音开源项目「GitHub 热点速览」
    上周的热门开源项目让我想起了「图灵测试」,测试者在不知道对面是机器还是人类的前提下随意提问,最后根据对方回复的内容,判断与他们交谈的是人还是计算机。如果无法分辨出回答者是机器还是人类,则说明机器已通过测试,具有人类的智力水平。​虽然现在大模型的回答还充满AI“味”,可......
  • 使用idea提交代码到github时,提交用户显示为以前使用的用户不是当前github用户
    在idea使用http的方式拉取代码,并且同样是用http的方式提交的代码。导致出现这个问题,。所以提交和拉取代码最好还是用ssh的方式更为妥当。只需要修改git上传代码的方式为ssh的方式即可(还需要在idea中登入github账号)修改提交代码的方式-步骤如下点击git在选择[ManageRemotes......