0


利用 GitHub 和 Hexo 搭建个人博客【保姆教程】

利用 GitHub 和 Hexo 搭建个人博客

利用 GitHub 和 Hexo 搭建个人博客

一、前言

在网络飞速发展的今天,个人博客已成为人们在网络世界中展示独特个性、分享知识见解以及记录生活点滴的理想平台。GitHub 作为全球知名的开源代码托管平台,为我们提供了稳定且免费的存储服务,而 Hexo 作为一款基于 Node.js 的快速、简洁、高效的静态博客框架,两者结合,为我们打造个人博客带来了极大的便利,能让我们轻松搭建出既美观又功能丰富的博客。

二、准备工作

(一)安装 Node.js 和 Git

  1. Node.js 安装 Node.js 是 Hexo 运行所依赖的关键环境。访问 Node.js 官方网站(https://nodejs.org/),在首页上根据您的操作系统类型(Windows、Mac OS 或 Linux)选择相应的安装包进行下载。下载完成后,按照安装向导的提示逐步完成安装。安装结束后,打开命令行工具(在 Windows 上是“命令提示符”或“PowerShell”,在 Mac OS 和 Linux 上是“终端”),输入node -vnpm -v。如果正确安装,命令行将分别显示已安装的 Node.js 版本号和 npm(Node.js 的包管理工具)版本号。
  2. Git 安装 Git 是用于管理博客代码版本以及将博客内容推送到 GitHub 的重要工具。前往 Git 官方网站(https://git-scm.com/),同样根据操作系统类型下载合适的安装包进行安装。安装完成后,在命令行中输入```git --version```,若显示 Git 的版本信息,则表明安装成功。

(二)注册 GitHub 账号

打开浏览器,访问 GitHub 官网(https://github.com/)。在首页上找到“Sign up”按钮,点击后按照提示填写相关信息,包括用户名、邮箱地址和密码等,完成注册过程。这个账号将作为存储博客文件的仓库,承载着博客的所有代码和内容。

三、安装 Hexo

(一)创建博客目录

在本地计算机的硬盘上,选择一个您方便管理的位置(例如 D 盘根目录或者用户目录下的某个文件夹),创建一个新的文件夹,将其命名为

myblog

(您也可以根据自己的喜好命名,但要注意避免使用特殊字符和空格)。这个文件夹将作为博客项目的根目录,后续所有与博客相关的文件和操作都将在这个目录下进行。

(二)安装 Hexo

打开命令行工具,通过

cd

命令进入到刚刚创建的博客目录(例如,如果您在 Windows 上,且博客目录在 D 盘根目录下,您可以输入

d:

然后

cd myblog

;如果在其他操作系统下,使用相应的路径导航命令)。进入目录后,运行以下命令安装 Hexo:

npm install -g hexo-cli

。此命令中的

-g

参数表示全局安装,

hexo-cli

是 Hexo 的命令行工具,全局安装后可以在任何目录下使用 Hexo 相关命令。安装过程可能需要一些时间,因为它需要从网络上下载 Hexo 的相关文件和依赖。

(三)初始化博客

在博客目录下继续运行

hexo init

命令。这个命令会自动下载 Hexo 初始化博客项目所需的文件和配置信息,并按照 Hexo 的默认结构进行组织。初始化完成后,博客目录下会出现以下主要的目录和文件:

  1. **_config.yml**:这是 Hexo 的核心配置文件,整个博客的各种设置都在这里完成。它是一个 YAML 格式的文件,通过简单的键值对来配置博客的参数,包括博客的标题、副标题、作者、语言、主题、插件等众多设置。例如,title字段用于设置博客的标题,subtitle字段用于设置副标题,author字段填写作者姓名,language字段可以指定博客使用的语言,如en(英语)、zh-CN(中文简体)等。
  2. **source**:这个目录是用户创建博客文章和页面的源文件存放处。默认情况下,我们使用 Markdown 格式来撰写文章。在这个目录下创建的 Markdown 文件将被 Hexo 解析并转换为网页内容。例如,您可以在source/_posts子目录下创建新的博客文章文件。
  3. **themes**:存放博客主题文件的目录。Hexo 有大量丰富多样的开源主题可供选择,每个主题都有其独特的设计风格和功能。不同的主题可以让您的博客呈现出完全不同的外观和交互体验。
  4. **public**:这个目录用于存放 Hexo 根据source目录中的内容和_config.yml的配置生成的静态文件。这些静态文件包括 HTML、CSS、JavaScript 等,它们将被部署到服务器(如 GitHub)上,供用户通过浏览器访问。
  5. 此外,还有其他一些辅助文件和文件夹,如scaffolds用于生成文章或页面的模板,package.json用于管理项目的依赖等。

四、配置 Hexo

(一)修改配置文件

使用文本编辑器(如 Windows 上的 Notepad++、Sublime Text,Mac OS 上的 Visual Studio Code 等)打开

_config.yml

文件。在文件中找到并修改以下关键信息:

  1. 基本信息修改- 博客标题(title:输入您为博客想好的名称,这个名称将显示在博客的首页和浏览器标签页上,例如“知识探索者的博客”。- 副标题(subtitle:可以填写一个简短的描述性语句,进一步说明博客的主题或特色,如“分享科技与人文的点滴”。- 作者(author:填写您的姓名或者您希望在博客上显示的作者名称。
  2. 其他设置- url字段:如果您已经有了自定义的域名,可以填写完整的域名地址,如https://www.myblog.com。如果暂时没有域名,可先留空。- permalink字段(可选):用于设置文章的永久链接格式。默认的格式可能比较复杂,您可以根据自己的喜好进行简化,例如设置为:year/:month/:day/:title/,这样文章的链接会更清晰易读。

(二)选择主题

  1. 主题搜索与选择 前往 Hexo 主题官网(https://hexo.io/themes/)浏览各种主题的展示和介绍,或者在 GitHub 上通过搜索“Hexo theme”来查找更多主题。在众多主题中,根据自己的审美和博客功能需求选择一个心仪的主题。例如,如果您喜欢简洁现代的风格,next主题是一个很不错的选择;如果您追求个性化和丰富的视觉效果,landscape等主题可能更符合您的口味。
  2. 主题下载与安装next主题为例,在博客目录下的命令行中运行git clone https://github.com/iissnan/hexo-theme-next themes/next。这条命令使用 Git 从指定的 GitHub 仓库下载next主题的文件,并将其存放在themes/next目录下。不同的主题可能有不同的安装方式,但通过 Git 克隆仓库是一种常见且便捷的方法。
  3. 主题启用 主题下载完成后,需要在_config.yml文件中修改theme的值。找到theme字段,并将其值修改为您所下载的主题文件夹名称,例如对于next主题,将theme: landscape(如果之前是其他主题)修改为theme: next。修改完成后保存配置文件。

五、创建并撰写博客文章

(一)创建新文章

在博客目录下打开命令行,运行

hexo new "文章标题"

命令。这里的“文章标题”是您要创建的新文章的题目,例如

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

。运行此命令后,Hexo 会在

source/_posts

目录下创建一个新的 Markdown 文件,文件名是根据文章标题生成的,同时会自动添加一些基本的头部信息,如文章的创建日期、标题等。

(二)撰写文章

使用文本编辑器打开新创建的 Markdown 文件。在 Markdown 文件中,您可以按照 Markdown 语法来撰写文章内容。以下是一些常用的 Markdown 语法:

  1. 标题 使用#号来表示标题,#号的数量表示标题的级别。例如,# 一级标题## 二级标题,以此类推。标题级别一般不建议超过六级。
  2. 段落 直接在文本中换行即可表示新的段落。如果需要在段落之间添加空行,可以在两个段落之间额外添加一行空行。
  3. 字体样式- 加粗:使用**__将需要加粗的文字包围起来,如**这是加粗的文字**。- 斜体:使用*_将需要斜体的文字包围起来,如*这是斜体文字*
  4. 列表- 无序列表:使用-+*作为列表项的前缀,例如:
- 列表项 1
- 列表项 2
- **有序列表**:使用数字和`.`作为列表项的前缀,例如:
1. 第一项
2. 第二项
  1. 链接 使用[链接文字](链接地址)的格式来创建链接,如[百度](https://www.baidu.com)
  2. 图片 使用![图片说明](图片地址)的格式来插入图片。如果图片是本地图片,需要将图片放置在博客项目的合适目录下,并在 Markdown 文件中使用相对路径指向图片。如果是网络图片,则直接使用图片的网络地址。

在撰写文章过程中,您可以充分发挥想象力,结合文字、图片、链接等元素,使文章内容更加丰富生动。

六、本地预览博客

启动本地服务器

在博客目录下的命令行中运行

hexo server

命令。此命令会启动一个本地服务器,默认情况下,它会监听本地的

4000

端口。启动成功后,命令行中会显示服务器启动信息,包括本地访问地址

http://localhost:4000

。打开浏览器,在地址栏中输入这个地址,就可以看到您的博客在本地的预览效果。在本地预览过程中,您可以对博客的外观、文章内容、布局等进行检查和调整,确保一切符合您的预期。如果在预览过程中发现问题,可以及时回到相应的文件(如文章内容文件、配置文件、主题文件等)进行修改,然后刷新浏览器页面查看修改效果。

七、将博客部署到 GitHub

(一)创建 GitHub 仓库

登录到您的 GitHub 账号,在 GitHub 页面右上角点击“+”号,在弹出的下拉菜单中选择“New repository”。在创建仓库页面,填写以下信息:

  1. 仓库名称:建议命名为你的用户名.github.io,这里的用户名是您在 GitHub 注册的账号用户名。这个命名方式是 GitHub Pages 的特殊要求,用于识别和部署个人网站或博客。
  2. 仓库描述(可选):可以简要描述一下这个仓库的用途,比如“我的个人博客仓库”。
  3. 仓库类型:选择“Public”(公开)或“Private”(私有),根据您的需求来决定。如果您希望博客能够被任何人访问和浏览,选择“Public”;如果您只想自己可见或者仅对特定用户可见,可以选择“Private”。不过需要注意的是,私有仓库可能会有一些访问限制和额外的付费要求(如果超过一定的免费使用额度)。 填写完成后,点击“Create repository”按钮完成仓库创建。

(二)安装 hexo - deployer - git 插件

在博客目录下的命令行中运行

npm install hexo - deployer - git --save

。这个插件是 Hexo 用于将生成的静态文件部署到 GitHub 的关键工具。

--save

参数表示将这个插件添加到项目的依赖列表中,以便在项目的其他环境中也能正确使用。安装完成后,插件会被下载并安装到博客项目的

node_modules

目录下。

(三)配置部署信息

_config.yml

文件中添加以下部署配置:

deploy:type: git
  repo: https://github.com/你的用户名/你的用户名.github.io.git
  branch: main

这里需要注意,要将上述配置中的“你的用户名”替换为您自己的 GitHub 用户名。

type

字段指定部署类型为

git

repo

字段是 GitHub 仓库的地址,

branch

字段指定要推送的分支,通常是

main

(如果您的仓库使用的是默认的主分支)。

(四)部署博客

在博客目录下运行

hexo deploy

命令。这个命令会首先根据

source

目录中的内容和配置信息生成静态文件,然后使用 hexo - deployer - git 插件将这些静态文件推送到 GitHub 仓库中。在推送过程中,命令行可能会提示您输入 GitHub 的用户名和密码(如果您没有配置 SSH 密钥)。输入正确的信息后,推送操作会继续进行。推送完成后,稍等片刻(一般几分钟内),就可以通过

你的用户名.github.io

访问您的个人博客了。如果遇到访问问题,可以检查仓库设置、域名解析(如果有自定义域名)以及文件推送是否完整等情况。

八、总结

通过以上详细的步骤,我们成功地利用 GitHub 和 Hexo 搭建了个人博客。在后续的使用过程中,您可以不断更新博客文章,分享更多有价值的内容;也可以根据自己的喜好更换主题,为博客带来新的外观;还可以添加各种 Hexo 插件来扩展博客的功能,如添加评论系统、搜索功能等。希望这篇文章能成为您搭建博客之旅的有力指南,让您在网络世界中拥有一个属于自己的精彩空间。

版权声明:
原创博主:牛哄哄的柯南
博主原文链接:https://keafmd.blog.csdn.net/
个人博客链接:https://keafmd.top/

看完如果对你有帮助,感谢点击下面的点赞支持!
[哈哈][抱拳]

在这里插入图片描述
加油!

共同努力!

Keafmd

感谢支持牛哄哄的柯南,期待你的三连+关注~~

keep accumulate for my dream【共勉】

如果遇到问题,可以在下方找到我。

                                                   ↓   ↓   ↓   合作 交流  ↓   ↓   ↓  

本文转载自: https://blog.csdn.net/weixin_43883917/article/details/143885553
版权归原作者 牛哄哄的柯南 所有, 如有侵权,请联系我们删除。

“利用 GitHub 和 Hexo 搭建个人博客【保姆教程】”的评论:

还没有评论