博客搭建教程Github+Hexo+hexo-theme-matery主题

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

前情提要

写这篇文的目的

  • 记录自己搭建过程,便于以后快速复用
  • 总结经验和自己踩的坑,给其他小伙伴一些参考(由于是搭建后写的,所以没有参考图片)

介绍

  • 初步效果参考我的博客:hermia的个人博客
  • 本博客基于Hexo框架,使用github托管
  • 使用自定义域名:hermiablog.com
  • hexo主题:hexo-theme-matery

主题特性

  • 简单漂亮,文章内容美观易读
  • Material Design 设计
  • 响应式设计,博客在桌面端、平板、手机等设备上均能很好的展现
  • 首页轮播文章及每天动态切换 Banner 图片(我选的图片都很美,期待你的每天访问哦)
  • 瀑布流式的博客文章列表(文章无特色图片时会有漂亮的图片代替)
  • 时间轴式的归档页
  • 词云的标签页和雷达图的分类页
  • 丰富的关于我页面(包括关于我、文章统计图、我的项目、我的技能、相册等)
  • 可自定义的数据的友情链接页面
  • 支持文章置顶和文章打赏
  • 支持 MathJax
  • TOC 目录
  • 可设置复制文章内容时追加版权信息
  • 可设置阅读文章时做密码验证
  • Gitalk、Gitment、Valine 和 Disqus 评论模块(推荐使用 Gitalk)
  • 集成了不蒜子统计、谷歌分析(Google Analytics)和文章字数统计等功能
  • 支持在首页的音乐播放和视频播放功能
    • 博客正在建设中,更多功能敬请期待…

跟着本篇文章,你会实现:

  • 使用github用户名.github.io/自定义域名访问博客
  • 设置自己喜欢的主题

软件准备

  • git
  • Node.js
  • 任一编辑器
  • 注意:命令行操作使用git,文件内容编辑使用vscode

参考官方文档

  • Github Pages文档
  • Hexo官方文档

低配版:github域名+默认hexo主题

步骤

  • 新建本地仓库
  • 安装hexo
  • 创建github仓库
  • 链接远程仓库
  • 部署
新建本地仓库

我的电脑里同时使用了gitee和github仓库,且使用了不同的用户名及邮箱,因此

  • 不能使用全局的用户名、邮箱配置
  • 所以在使用SSH链接远程仓库时要单独配置
  • 首先在本地新建空文件夹myblog
  • 注意:不要使用git init来初始化仓库
  • 因为hexo安装必须在空文件夹
安装Hexo
  • 右击刚刚新建的文件夹myblog,点击Git Bash Here打开git窗口
  • 输入npm install -g hexo-cli安装Hexo
  • 验证是否安装成功hexo -v
  • 初始化Hexo:hexo init
  • 查看是否能在本地启动成功:hexo s;启动服务器,访问网址之后可以看到hexo的初始界面;停止服务器:ctrl+c
npm install -g hexo-cli

hexo -v

hexo init

hexo s

Hexo相关目录文件

  • node_modules是node.js各种库的目录
  • public是生成的网页文件目录
  • scaffolds里面就三个文件,存储着新文章和新页面的初始设置
  • source是我们最常用到的一个目录,里面存放着文章、各类页面、图像等文件
  • themes存放着主题文件,一般也用不到。
    • 我们平时写文章只需要关注source/_posts这个文件夹就行了
创建github仓库

注意:仓库名必须是用户名.github.io,这有这样做,部署完之后才能使用http://用户名.github.io访问

  • 打开https://github.com/,新建一个项目仓库
  • 选择公开仓库和需要README文件
  • git仓库默认主分支名为main,建议修改为master,和本地仓库的主分支名相同
使用SSH密钥链接远程仓库
  • 回到本地仓库的git界面
  • 绑定用户名和邮箱
# 全局
git config --global user.name "yourname"
git config --global user.email "youremail"
# 局部
git config --global user.name "yourname"
git config --global user.email "youremail"
# 查看用用户名和邮箱信息是否配置成功
git config  --list
  • 如果你和我一样有多个仓库,就去掉 --global
  • 邮箱就是你github绑定的邮箱
  • 检查是否配置成功
  • 创建SSH
ssh-keygen -t rsa -C 邮箱名
  • 后面是自己注册github的邮箱,然后敲三次回车
  • 接着就会发现C:\Users\用户名下多了一个.ssh目录,打开后有一个公钥,一个私钥。id_rsa.pub是公钥
  • 我们需要打开它,复制里面的内容
  • 打开github,在头像下面点击settings,再点击SSH and GPG keys,新建一个SSH,标题随意取,把刚刚复制id_rsa.pub里面的信息粘贴到钥匙框
  • 在git bash输入ssh -T git@github.com;如果出现...successfully...就成功了
将hexo和GitHub关联
  • 打开本地仓库,博客文件夹,在根目录找到_config.yml文件,使用vscode或任一编辑器打开
  • 修改配置:
deploy:
  type: git
  repository: github地址
  branch: master
  • 获取repository:打开github仓库–>Code–>复制SSH地址填入即可
  • 注意:hexo的所有文件,在修改时切记冒号后面有空格,否则报错
部署
  • 安装deploy-git
npm install hexo-deployer-git --save
  • 依次执行以下命令
# 清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo c
# 生成静态文件
hexo g
# 部署网站
hexo d
  • 注意:虽然我们使用的是git,但是hexo d会自动把文件传到github上;不需要再使用git push
  • 完成以上步骤,你就可以使用xxx.github.io来访问你的博客啦
  • 以后写文章,只需要以下命令
hexo new post "文章标题"
hexo c
hexo g
hexo d
使用
  • 新建文章 hexo new post 标题
  • 部署
#清理之前的生成
hexo c
# 生成静态网站
hexo g
#开启本地服务 ctrl+c 停止
hexo s
#上传到github
hexo d
自定义域名
  • 首先,自定义域名需要花钱买,华为云/腾讯云/阿里云都可以
  • 购买之后需要解析域名

github绑定

  • 打开github仓库–>点击setting–>找到pages–>拉到Custom domain处,填写你购买的域名,进行绑定
  • 此时项目根目录会自动生成CNAME文件,如果没有的话自己创建一个,文档内容为你的域名

DNS配置

  • 进入华为云控制台,打开云解析服务DNS
  • 在域名解析集中添加一条
    • 记录类型为CNAME
    • 记录值为博客的github仓库名,我的是hermiablog.github.io
  • 等待一段时间就可以使用域名访问了
    博客搭建教程Github+Hexo+hexo-theme-matery主题,github,个人开发

github的使用

git——仓库配置

!!!首先 如果有仓库的用户名及邮箱不一样 就不要把它设置为全局

  • git安装后,点击文件夹–>右击 git bash here打开
  • 初始化本地仓库
git init
  • 设置用户名和有效
git config  user.name "你的名字(一定要是英文的)"
git config  user.email "你的邮箱"

# 查看用用户名和邮箱信息是否配置成功
git config --global --list

# 删除全局设置
git config --global --unset user.name
git config --global --unset user.email

添加SSH公钥

  • 创建SSH密钥对
ssh-keygen -t rsa -C 邮箱名
  • 如果不需要设置密码,可以直接按Enter键
  • 之后就会在用户主目录下的.ssh文件夹中生成以下两个文件:
id_rsa
id_rsa.pub
  • 其中id_rsa为私钥,id_rsa.pub为公钥
  • 将自定义路径的私钥添加到ssh秘钥搜索列表中
//连接认证agent(身份验证代理)
ssh-agent bash
//修改私钥路径
ssh-add ~/.ssh/id_rsa_github
  • 将公钥内容粘贴到自己github/Gitee的设置中
    • 用记事本打开id._rsa.pub文件,复制内容
    • 登录自己的github或gitee,在个人设置中找到“安全设置”–“ssh公钥”,标题自定,将公钥粘贴进去
  • 测试本机能否与github/gitee使用ssh通信
ssh -T git@gitee.com
//或
ssh -T git@github.com
  • ssh返回 “……successfully ……”,这表示可以与远程愉快的通信了

  • 本地仓库与GitHub远程仓库进行关联

git remote add origin 远程仓库地址(HTTP/SSH)
将本地代码推送到github
  • 可以将已经做好的项目推送到远程
  • 也可以解决git clone会嵌套一个文件夹的问题

本地

  • 新建空文件夹
  • 右击使用Git Bash打开文件夹,git init初始化仓库
  • 配置用户名和邮箱
git config  user.name "你的名字(一定要是英文的)"
git config  user.email "你的邮箱"
  • 创建SSH密钥对
ssh-keygen -t rsa -C 邮箱名
// 如果不需要设置密码,可以直接按Enter键
  • 之后就会在用户主目录下的.ssh文件夹中生成以下两个文件:
    id_rsa、id_rsa.pub;其中id_rsa为私钥,id_rsa.pub为公钥
  • 打开id_rsa.pub,复制内容,将公钥内容粘贴到自己github/Gitee的设置中
  • 将自定义路径的私钥添加到ssh秘钥搜索列表中
//连接认证agent(身份验证代理)
ssh-agent bash
//修改私钥路径
ssh-add ~/.ssh/id_rsa
  • 测试本机能否与github/gitee使用ssh通信
ssh -T git@github.com
//ssh返回 “……successfully ……”,这表示可以与远程愉快的通信了
  • 修改本地仓库主分支的命名
git branch -m master main
  • 本地仓库与GitHub远程仓库进行关联
git remote add origin 远程仓库地址(HTTP/SSH)
  • 将远程仓库拉取到本地(可以创建一个README文档,有内容可以看到变化)
git pull origin main
  • 将项目文件复制到本地仓库(node_module除外)
  • 将项目文件推送到远程
git add .
git commit -m ""
git push origin main
git基本操作
  • 将所有文件添加到暂存区中
git add .
  • 检测当前git仓库的状态
git status
  • 将暂存区中的更改保存到版本库中,并对本次的更改添加注释
git commit -m "XXX"
  • 命令来检测当前git仓库的状态
git status
  • 查看日志
git log
  • 创建新分支
git branch 分支名
  • 查看所有分支
git branch
  • 切换分支
git checkout 分支名
或
git switch 分支名
  • push到远程仓库上
git push origin 分支名

将文件提交到分支上

  • 切换到需要提交的分支上面
git checkout 分支名
  • 提交到分支上面
git add 文件名/.
git commit -m "描述"
git push origin 分支名
  • 切换到主分支
git checkout main
  • 将本地分支和合并到本地主分支上
git merge 分支名
  • 推动到远程仓库
git pull origin main

删除分支文章来源地址https://www.toymoban.com/news/detail-827693.html

  • 查看所有的分支
git branch -a
  • 删除远程分支
git push origin --delete 分支名
  • 删除本地分支
git branch -D 分支名

到了这里,关于博客搭建教程Github+Hexo+hexo-theme-matery主题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Hexo+Github搭建博客

    今天教大家搭建免费的个人博客,注意是 免费!免费!免费! 博客地址:https://1902756969.github.io/Hexo/ github地址:https://github.com/ 注册,注意是英文,因为是外链所以给大家推荐一款代理加速(不是翻墙)软件 FastGithub.UI:https://cloud.tsinghua.edu.cn/d/df482a15afb64dfeaff8/files/?p=%2Ffastgithu

    2024年02月01日
    浏览(30)
  • github+hexo 博客搭建

    环境:win11+wsl 打开终端安装以下软件 登录你的 GitHub 帐号,并创建一个新的仓库,仓库名是 username.github.io ,其中 username 是你的 GitHub 用户名。将该仓库设置为公开仓库。 设置ssh 创建一个新的文件夹,用于存储你的博客项目。 在终端中,进入该文件夹,并运行以下命令来初

    2024年02月10日
    浏览(48)
  • Hexo搭建个人博客(github)

    记录搭建个人博客的过程 本文使用Hexo+GitHub Page的方法搭建博客,下面是环境准备的步骤,包括nodejs的安装和git的安装(注:本教程仅适用于windows用户) 详情请参考这篇博客: NVM的安装使用与配置(node, npm, yarn 为了把本地的网页上传到git上,需要在系统上下载git,详情参考

    2024年02月21日
    浏览(36)
  • Hexo 搭建博客并推送GitHub

    浏览器访问: http://localhost:4000/ 1、首先要注册一个Github账号,新建一个name.github.io的仓库,也就是new repository。 因为博主之前创建好了现在就不能创建了。创建好后可以在你的仓库里新建一个index.html,里面可以随意输入几个字符,保存。 选择仓库的settings选项,在菜单栏找到

    2024年02月07日
    浏览(26)
  • hexo&github 搭建博客(保姆级)

    安装 Hexo 相当简单,只需要先安装下列应用程序即可: Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本) Git 具备以上环境后我们安装hexo 配置系统环境变量 在选好的目录下运行 通过以上步骤,最简单的hexo网站就好了,可以直接访问http://localhost:4000/,来看h

    2024年02月05日
    浏览(64)
  • 【Hexo + Github 搭建自己的专属博客】

    目录 一、前提环境配置 1. 安装Git和NodeJS 2. 安装Hexo 3. 加载主题 4. 修改主题配置 二、搭建博客 1. 将博客部署在GitHub上 2. 写文章并上传 3. 配置一些特效 三、最终成果 ​编辑 在 Windows 上使用 Git ,可以从 Git 官网直接 https://git-scm.com/downloads ,然后按默认选项安 装即可。安装完

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

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

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

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

    2024年01月19日
    浏览(59)
  • 基于Hexo在GitHub Pages上搭建博客的方法

    或许说这是本站从无到有搭建的记录更为准确。 本站?什么本站?总不能是CSDN吧?这里指的是我的个人博客网站 Karubon.moe ,这篇博客基于搭建这个网站时得到的经验教训编写。喜欢这篇博客的话不妨去我的网站看看呀。 在寒假的中期,百般聊赖之下,终于是打算拥有一个自

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

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

    2023年04月08日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包