在Github搭建个人博客-详细步骤整理

这篇具有很好参考价值的文章主要介绍了在Github搭建个人博客-详细步骤整理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

去年就有在 Github 搭建博客的想法,但是因为工作太忙搁置了,昨天想起来这事儿,于是网上各种查阅资料,感觉虽然搭建方式比较多,但都不是很全,走了很多弯路,折腾了我一天,才终于搭建好了自己的 GIthub 博客,在此记录梳理一下,希望可以帮到大家,欢迎交流!

博客采用的是Hexo框架(因为支持Markdown语法),使用的是Butterfly主题,搭建过程中的参考链接如下:

Hexo 官方文档:https://hexo.io/zh-cn/docs/
Hexo 官方主题:https://hexo.io/themes/
Butterfly 主题 GIthub:https://github.com/jerryc127/hexo-theme-butterfly
Butterfly 主题doc(主要包含主题配置及一些自定义):https://butterfly.js.org/archives/

最终效果:https://wuqiuxu.github.io

一、准备GIthub仓库

  1. 首先你需要在 Github 有一个自己的账号

  2. 进入个人主页可以看到Repositories,点击进入仓库
    github搭建个人博客,github,git,node.js

  3. 新建一个 Github 仓库,仓库名称填写github用户名.github.io(ps:因为我已经搭建过了,所以下图会出现仓库已存在的警告)
    github搭建个人博客,github,git,node.js

  4. 点击最下方的Create repository提交仓库
    github搭建个人博客,github,git,node.js

  5. 仓库生成后,复制自己的仓库地址,后续部署的时候需要(如果仓库里面没有文件,进入之后就是图一的样子,否则是图二,红框里就是地址)
    github搭建个人博客,github,git,node.js

github搭建个人博客,github,git,node.js

二、本地安装git

  • Mac 系统:brew install git
  • 其他系统可参考官网:https://git-scm.com/downloads

三、本地安装node.js

  1. 安装 nvm
  • Mac系统:brew install nvm
  • 其他系统可参考官网:https://nodejs.org/zh-cn/download
    github搭建个人博客,github,git,node.js
  1. 配置环境变量:vim ~/.zshrc
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
  1. 生效环境变量:source ~/.zshrc
  2. 查看 node.js 的可用版本:nvm ls-remote
  3. 安装 node.js(版本需不低于 10.13,官方建议使用 Node.js 12.0 及以上版本):nvm install v16.20.0
    github搭建个人博客,github,git,node.js
  4. 使用指定版本:nvm use v16.20.0
  5. 指定每次启动终端所使用的版本:nvm alias default v16.20.0

四、本地安装Hexo

  • 安装 Hexo:npm install -g hexo-cli(这里提示可以更新npm版本,可以更新一下:npm install -g npm@9.7.1
    github搭建个人博客,github,git,node.js

五、搭建博客

  1. 准备一个文件夹:mkdir blog
  2. 初始化:hexo init blog
    github搭建个人博客,github,git,node.js
  3. 进入文件夹:cd blog
  4. 安装:npm install
    github搭建个人博客,github,git,node.js
  5. 查看生成的文件:ls
    github搭建个人博客,github,git,node.js
  6. 克隆 butterfly 主题仓库:git clone -b master ``https://github.com/jerryc127/hexo-theme-butterfly.git`` themes/butterfly,然后在 themes 下就会多一个主题目录
    github搭建个人博客,github,git,node.js
  7. 修改blog目录下的 _config.yml(注意不是主题目录下的_config.yml),把 theme 的值改为 butterfly
    github搭建个人博客,github,git,node.js
  8. 配置主题,可以参考这篇文章:https://butterfly.js.org/posts/4aa8abbe/(这一步可以先跳过,等搭建好之后再修改)
  9. 生成文章:hexo new post "文章标题",然后就可以在 blog/source/_posts 下生成的md文件编写了(这一步也可以先跳过,等搭建好之后再来写)
  10. 生成静态文件 public(每次修改主题配置后都需要重新生成):hexo generate,缩写hexo g
    github搭建个人博客,github,git,node.js
  11. 启动本地服务器:hexo server,缩写hexo s(访问地址为:http://localhost:4000/,可以在本地查看页面,ctrl + c可以结束服务)
    github搭建个人博客,github,git,node.js
  12. 清除缓存文件 db.json 和已生成的静态文件 public :hexo clean,缩写hexo cl

有时候对站点的更改不生效,可能需要先运行该命令再重新生成文件

六、部署到Github

  1. 修改blog目录下的 _config.yml(注意不是主题下的_config.yml
    a. type 类型配置为 git
    b. repo 那里配置为自己的Github仓库地址
    github搭建个人博客,github,git,node.js
    按照yml文件格式要求,:后面必须留有一个空格

  2. 安装一键部署插件:npm install hexo-deployer-git --save

  3. 一键部署到Github:hexo deploy ,缩写hexo d文章来源地址https://www.toymoban.com/news/detail-616021.html

到了这里,关于在Github搭建个人博客-详细步骤整理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用hugo+github搭建免费个人博客

    前提条件 win11电脑一台 电脑安装了git 电脑安装了hugo github账号一个 初始化一个博客 打开cmd窗口,使用hugo新建一个博客工程 下载主题 主题官网:themes.gohugo.io 在上面找一个主题,我这里找名称为 m10c 的主题:m10c | Hugo Themes (gohugo.io) 注意 :不同主题的安装方式不同,以后再专

    2024年01月18日
    浏览(58)
  • 使用 Jekyll 在 GitHub 上搭建个人博客

    原文转载于个人博客文章 使用 Jekyll 在 GitHub 上搭建个人博客 搭建流程: 下载安装配置Git GitHub创建公共仓库 克隆本地仓库 克隆博客模板 博客基础功能设置 设置评论功能 上传GitHub 下载 Git官网 Git 安装配置参考以下教程 创建仓库名结尾为 * .github.io 的公共仓库 示范:ChenPe

    2024年01月15日
    浏览(62)
  • hexo+GitHub搭建个人博客前期安装部署

    安装Git ==================================================================== 什么是Git Git是目前世界上最先进的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。也是Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。Git也是你博客平台

    2024年04月22日
    浏览(67)
  • 【实操】基于 GitHub Pages + Hexo 搭建个人博客

    《开发工具系列》 相信很多学习技术的读者朋友们,都梦想能创建一个属于自己的个人博客。现在,这将不是梦想,下面跟着 Huazie 一起利用 GitHub Pages + Hexo 搭建一个属于自己的个人博客吧。 Node.js 官方下载地址 注意: Hexo 官方建议使用 Node.js 12.0 及以上版本 笔者本地下载的

    2024年01月19日
    浏览(74)
  • 【2023最新版】Hexo+github搭建个人博客并绑定个人域名

    本篇教程完整讲述了如何利用Hexo+github搭建个人博客并且绑定自己的域名,成为自己的网站! 我的博客网站:武师叔 - 做一个有趣而不甘平庸的人!---------------------------------(备用wushishu.github.io) 教程参考了很多互联上的内容,在美化教程上面可以根据自己的审美,不必全部照

    2023年04月08日
    浏览(55)
  • 使用Hugo+Github从0开始免费搭建个人博客

    以win11为例 1.注册git账号:https://github.com/并记住用户名和密码 2.下载地址:Git - Downloads (git-scm.com)鼠标右键显示Git Bash Here就表示安装Git成功了。 3.设置本地git用户 是否已经登录 生成密钥 将其中Your Name替换为用户名,邮箱替换为自己注册时的邮箱 如图所示,密钥已经给我们生

    2024年02月12日
    浏览(46)
  • Hexo+GitHub搭建个人博客教程(2023最新版)

    1、node环境 首先,安装 nodejs, 因为Hexo是基于 Node.js 驱动的一款博客框架。 ⭐nodejs下载地址 2、git 环境 然后,安装git, 一个分布式版本控制系统,用于项目的版本控制管理,作者是 Linux 之父。 ⭐Git(官网) ⭐Git for Windows(仅windows安装包) ⭐CNPM Binaries Mirror [阿里镜像](速

    2024年02月06日
    浏览(69)
  • 如何使用Jekyll在GitHub Pages上搭建网站(个人博客)

    本文很长,建议使用侧边栏进行跳转。 Jekyll 是一个基于 Ruby 语言的,用于搭建静态网站的生成器,主要用于搭建博客网站(官方自己的介绍为:Jekyll is a blog-aware, static site generator in Ruby)。但是虽然是静态网站,但是可以实现一些使用数据库的动态网站的效果和功能,是很不

    2024年02月06日
    浏览(84)
  • 10分钟 使用VitePress和GitHub Actions快速搭建发布个人博客

    VitePress官网Getting Started | VitePress VitePress 是一个静态站点生成器 (SSG),旨在构建快速、以内容为中心的网站。 Node.js (nodejs.org)Node版本18或更高版本 **使用 node -v **查看node版本 创建文件夹并进入到项目的目录 初始化项目 这里会带有设置向导 安装项目所需的 vitepress 依赖 在

    2024年02月03日
    浏览(72)
  • 【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床

    准备工作: 首先电脑得提前完成安装如下: 1. nodejs环境(node ,npm):【安装指南】nodejs下载、安装与配置详细教程 2. Picgo:【安装指南】图床神器之Picgo下载、安装与配置详细教程 3. Typora:【安装指南】markdown神器之Typora下载、安装与无限使用详细教程 工具介绍: typora: Markdown工

    2024年02月20日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包