利用Github Pages+Hexo搭建个人博客

2024-04-11 18:18

本文主要是介绍利用Github Pages+Hexo搭建个人博客,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

技术简介

Github Pages

GitHub Pages 本来用于介绍托管在Github上的项目,由于它的空间免费稳定,因此适合用来搭建博客。

每个帐号只能有一个仓库来存放个人主页,且仓库的名字必须是username/username.github.io。你可以通过http://username.github.io来访问你的个人主页

个人主页的网站内容是在master分支下

Hexo

Hexo是一个快速、简洁高效的博客框架,具有如下特点:

  • 生成静态网页
  • 支持Markdown
  • 一键部署博客到Github Pages
  • 丰富插件

七牛云

使用七牛云作为图床。

认证后的七牛云存储提供10G的免费空间以及每月10G的流量

配置环境

Git

安装Git

进入网站https://git-scm.com/下载安装即可

Node.JS

安装Node.JS

进入网站https://nodejs.org/en/,下载安装即可

Hexo

安装Hexo

在任意位置右键点击Git Bash Here

使用npm安装hexo,可以先切换npm源,加速安装过程

npm config set registry https://registry.npm.taobao.org
npm install -g hexo

【注】若安装不成功,可以使用npm install hexo --save再次安装

出现以下图示表示安装完成。

【注】若提示This package is no longer maintained,耐心等待安装即可。

mark

配置Hexo
创建hexo文件夹

在某一文件夹下如F:\hexo\blog,右键Git Bash Here,使用以下命令创建建立网站需要的文件

hexo init

mark

安装依赖包
npm install

mark

生成静态文件
hexo generate #生成静态文件,会在当前目录下生成一个新的名为public的文件夹
启动Hexo
hexo server -p 5000 #使用hexo server 默认端口4000,会无法访问localhost:4000,因此改为5000端口
常用hexo命令
hexo help #查看帮助
hexo -v #查看本地环境
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo gernerate #生成网页,可以在public目录查看整个网站的文件
hexo server #本地预览 Ctrl+C关闭
hexo deploy #或hexo d 部署到远端如github、heroku
hexo clean #清除缓存 建议每次执行命令前先清理缓存,每次部署前先删除 .deploy文件夹
#常用缩写
hexo n  #hexo new
hexo g  #hexo generate
hexo s  #hexo server
hexo d  #hexo deploy
#常用组合
hexo d -g #生成部署
hexo s -g #生成预览

操作流程

Github Pages

创建页面仓库

创建一个仓库,需要和帐号对应,格式yourname.github.io,创建仓库

生成SSH密钥

任意地方右键Git Bash Here,执行以下命令

ssh-keygen -t rsa -C "你的邮箱地址"

出现Enter file in which to save the key (.....)直接回车选择默认位置

出现Enter passphrase(empty for no passphrase)直接两次回车不设密码以及确认

mark

在Github上添加SSH密钥

打开id_rsa.pub,复制内容。

进入https://github.com/settings/ssh

点击New SSH key

mark

填写后点击Add SSH key

mark

Hexo

目录结构

mark

  • deploy #需要部署的文件
  • node_modules #Hexo插件
  • public #生成的静态网页文件
  • scaffolds #模板
  • source #博客正文和其他源文件
  • drafs #草稿
  • posts#文章
  • themes #主题
  • config.yml #配置文件
部署
原理
  1. 上述步骤中在Github上创建的那个仓库username.github.io,可以通过该链接访问
  2. Hexo -g 会生成一个静态网站,第一次会生成一个public目录,这个静态文件可以直接访问
  3. 需要将Hexo生成的静态网站,提交(git commit)到github上
过程

需要在_config.yml中修改

deploy:type: gitrepository: http://github.com/tianwenyu/tianwenyu.github.io.gitbranch: master

【注】

  • repository:后面的tianwenyu/tainwenyu.github.io.git要与自己创建的仓库名保持一致

mark

  • .yml文件对格式要求严格,type: repository: branch: 前面两个空格,冒号后面一个空格

安装依赖包

npm install hexo-deployer-git --save

配置好之后执行

hexo genearte
hexo deploy

【注】以上命令执行的环境必须在执行hexo init创建的文件夹下执行

执行完以上命令,会出现页面输入你的github用户名和密码,验证后就可以上传成功

访问tianwenyu.github.io,成功打开页面即部署成功。

配置

选择的主题为indigo,具体问题可以看链接。

安装主题

安装前确认你的Hexo版本在3.0以上,以及Node版本为6.x以上,在Hexo根目录,执行以下命令

git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo
安装依赖
  • 安装Less

    npm install hexo-renderer-less --save
  • 安装Feed

    npm install hexo-generator-feed --save
  • 安装Json-content

    npm install hexo-generator-json-content --save
  • 安装QRCode

    npm install hexo-helper-qrcode --save
启用主题

编辑站点配置文件hexo/_config.yml

搜索theme,修改为theme: indigo

基本配置

修改以下内容

title: your title
subtitle: your subtitle
description: your description
keywords: your keywords
author: your name
email: your email
url: your site url
indigo主题配置

编辑主题配置文件hexo/themes/_config.yml

详情见indigo主题配置

新建文章

hexo new "postname"

该命令会自动在hexo/source/_post文件夹下创建一个名为postnamemarkdown文件,会自动在文件开头添加

---
title: 你的题目
tags: 你的标签
category: 你的分类
---

填写tags,category,新建标签页面和分类页面后即可以显示相应的标签和分类

新建标签页面

hexo new page tags

该命令会自动在hexo/source文件夹下创建tags文件夹并在该文件夹下创建index.md文件。

修改index.md文件,添加以下两项

layout: tags
comments: false
新建分类页面

hexo new page categories

该命令会自动在hexo/source文件夹下创建categories文件夹并在该文件夹下创建index.md文件

修改index.md文件,添加以下两项:

layout: categories
comments: false

这篇关于利用Github Pages+Hexo搭建个人博客的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/894827

相关文章

使用docker搭建嵌入式Linux开发环境

《使用docker搭建嵌入式Linux开发环境》本文主要介绍了使用docker搭建嵌入式Linux开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录1、前言2、安装docker3、编写容器管理脚本4、创建容器1、前言在日常开发全志、rk等不同

Linux搭建ftp服务器的步骤

《Linux搭建ftp服务器的步骤》本文给大家分享Linux搭建ftp服务器的步骤,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录ftp搭建1:下载vsftpd工具2:下载客户端工具3:进入配置文件目录vsftpd.conf配置文件4:

Java 与 LibreOffice 集成开发指南(环境搭建及代码示例)

《Java与LibreOffice集成开发指南(环境搭建及代码示例)》本文介绍Java与LibreOffice的集成方法,涵盖环境配置、API调用、文档转换、UNO桥接及REST接口等技术,提供... 目录1. 引言2. 环境搭建2.1 安装 LibreOffice2.2 配置 Java 开发环境2.3 配

在Linux系统上连接GitHub的方法步骤(适用2025年)

《在Linux系统上连接GitHub的方法步骤(适用2025年)》在2025年,使用Linux系统连接GitHub的推荐方式是通过SSH(SecureShell)协议进行身份验证,这种方式不仅安全,还... 目录步骤一:检查并安装 Git步骤二:生成 SSH 密钥步骤三:将 SSH 公钥添加到 github

Python极速搭建局域网文件共享服务器完整指南

《Python极速搭建局域网文件共享服务器完整指南》在办公室或家庭局域网中快速共享文件时,许多人会选择第三方工具或云存储服务,但这些方案往往存在隐私泄露风险或需要复杂配置,下面我们就来看看如何使用Py... 目录一、android基础版:HTTP文件共享的魔法命令1. 一行代码启动HTTP服务器2. 关键参

如何使用Haporxy搭建Web群集

《如何使用Haporxy搭建Web群集》Haproxy是目前比较流行的一种群集调度工具,同类群集调度工具有很多如LVS和Nginx,本案例介绍使用Haproxy及Nginx搭建一套Web群集,感兴趣的... 目录一、案例分析1.案例概述2.案例前置知识点2.1 HTTP请求2.2 负载均衡常用调度算法 2.

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

github打不开的问题分析及解决

《github打不开的问题分析及解决》:本文主要介绍github打不开的问题分析及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、找到github.com域名解析的ip地址二、找到github.global.ssl.fastly.net网址解析的ip地址三

如何搭建并配置HTTPD文件服务及访问权限控制

《如何搭建并配置HTTPD文件服务及访问权限控制》:本文主要介绍如何搭建并配置HTTPD文件服务及访问权限控制的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、安装HTTPD服务二、HTTPD服务目录结构三、配置修改四、服务启动五、基于用户访问权限控制六、

pytest+allure环境搭建+自动化实践过程

《pytest+allure环境搭建+自动化实践过程》:本文主要介绍pytest+allure环境搭建+自动化实践过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、pytest下载安装1.1、安装pytest1.2、检测是否安装成功二、allure下载安装2.