教程:纯小白如何搭建自己的Github博客并写第一篇博文

article/2025/10/29 4:10:55

文章目录

  • 1 搭建Github博客
    • 1.1 确认github上创建的repository名称
    • 1.2 用系统命令行安装hexo并初始化本地博客文件夹
    • 1.3 下载并安装hexo NexT主题
    • 1.4 更新部署博客页面
  • 2 创建并发布自己的第一篇文章
    • 2.1 用hexo new命令创建文章脚本
    • 2.2 编辑文章
    • 2.3 发布文章/更新博客

写在前面:最近完成了我的github博客,搭建的过程很简单,我也是照着网上的教程学习的。但由于之前我没接触过博客搭建,搭建完之后如何写文章并发布花了很长时间才搞定。而网上的教程也几乎停留在搭建博客结束,因此我决定把自己的学习成果记录下来,希望对大家有帮助。

1 搭建Github博客

这一步我不想赘述,请大家移步看 知乎用户@会飞的猪 写的这篇文章(https://zhuanlan.zhihu.com/p/28321740),过程写得非常清晰,我就是按照这篇文章完成了第一步博客的搭建。在此感谢 知乎用户@会飞的猪,大家可以也觉得他这篇文章有帮助,也可以给他点个赞:) 。由于我的最终搭建过程略有出入,大家可以完成到这篇文章中的第2部分-github官网的相关设置,跳回来跟着下面的步骤继续。

这篇文章的第3部分-Github桌面版我也下载了,不过不是必要的,后面我没怎么用,在本文的后半部分我也会教大家如何用简单的命令行进行博客的发布。

此外,博客的主题我用的是hexo的NexT,大家可以跟我一起先用NexT主题熟悉一遍:
(当前假设大家都完成了上述文章中Github官网的设置)

1.1 确认github上创建的repository名称

首先确认github上repo的名称有没有写对,比如我的github昵称为“YUZehuiIC”,repo名称就叫“YUZehuiIC.github.io”,下一步在本地创建的文件夹名称也叫“YUZehuiIC.github.io”。这一步很重要,如果不一致会导致很多奇怪的bug。

1.2 用系统命令行安装hexo并初始化本地博客文件夹

打开电脑命令行,cd到打算保存博客项目的父文件夹,比如我是
博客文件夹的父目录
然后输入以下命令行,先安装hexo,并创建hexo默认主题。注意这里命令行不要用Windows PowerShell,要用“Windows键+R”调出运行,输入cmd调出系统命令行,否则hexo init会报错。

$ npm install hexo-cli -g	# 如果没有安装npm, 百度一下其他教程,这个不难,在此不赘述
$ hexo init YUZehuiIC.github.io  # 注意这是我的博客名,你要替换成自己的,和github上创建的repo一模一样
$ cd YUZehuiIC.github.io	# 进入本地的博客文件夹(以下统称“本地博客文件夹”)
$ npm install
$ hexo server	# 打开本地服务器预览

完成这一步之后,你可以在浏览器地址栏里输入“http://localhost:4000/”看看有没有新安装的hexo主题博客,如果失败了可以返回去看下上面加粗的几个重要点,或者在评论区留言问我。

1.3 下载并安装hexo NexT主题

(假设当前文件夹就是本地博客文件夹“YUZehuiIC.github.io”)
这里先附上NexT主题的官方Github链接:https://github.com/next-theme/hexo-theme-next,我是根据里面的README.md教程配置的。

$ npm install hexo-theme-next	# 下载并安装NexT主题

安装好后,打开本地博客文件夹下的_config.yml文件,即YUZehuiIC.github.io/_config.yml,找到里面的“theme”,改成next,如下所示:

theme: next

(对了,插一句,我用的代码编辑器是Sublime Text3,如果大家没有找到合适的编辑器可以试试这个,挺好用的)

1.4 更新部署博客页面

$ hexo clean	# 清空一下缓存,有时候博客页面显示不正常也可以试试这个命令行
$ hexo g	# 是hexo generate的简写,把刚刚做的改动生成更新一下
$ hexo server	# 在本地服务器看看博客有没有更新成NexT主题:https://localhost:4000
$ hexo d	# hexo deploy,如果本地服务器看了没问题就可以输入github账号和密码传到网站上啦

打开浏览器,输入网站名(我的是https://YUZehuiIC.github.io,大家改成自己的名字),名字总是这个,所以前面github创建的repo名字还有本地博客文件夹名字一定不能错。

至此,github博客的搭建与hexo NexT主题的配置都搞定啦,开不开心!如果有问题可以在评论区问我。

2 创建并发布自己的第一篇文章

这一部分是我写这篇文章的初衷和意义,因为搭建github博客的教程网上非常多,也写得比我好多了。但是对于像我一样的小白而言,搭建完博客,却不知道怎么写文章,而网上的相关教程又很少,是最令人头大的。下面跟我一起来学习吧!

首先给大家看一下当前的本地博客文件夹结构:
本地博客文件夹的目录结构

可以看到其中有一个source文件夹,就是用来存放我们的博客文章啦。

2.1 用hexo new命令创建文章脚本

下面再次打开系统命令行,cd到本地博客文件夹,输入如下命令创建第一篇文章。

$ hexo new post "A Quick Start for Blog Writing-Markdown"	# 这里引号里面是你的博客名称,这里我写的就是我第一篇博客的名称

如果你顺利创建的话,就可以看到source文件夹下多了一个文件夹“_posts”,并且有个.md后缀的文件出现在_posts文件夹下,比如我的就是“A-Quick-Start-for-Blog-Writing-Markdown.md”

如果你想先写一篇草稿,再把草稿发布成文章,可以输入如下命令行:

$ hexo new draft "my first draft"

写完后再用hexo publish命令发布,具体的可以看我的github博客中的这篇文章,里面有一些基本的Markdown语法和hexo的命令使用:https://yuzehuiic.github.io/2021/05/29/A-Quick-Start-for-Blog-Writing-Markdown/。之后我会相应地写一篇中文版的发到CSDN上来。

2.2 编辑文章

现在打开刚刚创建好的这个.md文件,可以看到已经有一些简单的内容生成了,如“title”"date"等,后面的内容就是你自己发挥啦,支持Markdown语法,我简单截图给大家看一下我的第一篇博客:
我的第一篇Github博客脚本

2.3 发布文章/更新博客

完成文章的编辑后,最后一步是把文章发布出去,其实就是更新博客,还是这几个命令行:

$ hexo clean
$ hexo g
$ hexo server	# 先在本地预览一下,这一步也可以跳过,直接到下一步
$ hexo d

在浏览器里更新一下自己的博客,看看第一篇文章有没有出现呢?如果在本地预览是有更新的,但浏览器中显示不正常,可以按F5强制刷新页面试试(不是浏览器的重新加载按钮噢)

希望看到这里的你也完成了自己的Github博客搭建与第一篇文章的发布,后续关于博客的美化我也在摸索当中,今天看到 CSDN博主@nightmare_dimple
有一篇写得很好的文章分享给大家(https://blog.csdn.net/nightmare_dimple/article/details/86661502)。如果搭建博客的过程中遇到了问题也不要气馁,可以在评论区留言问我。

最后附上我的Github链接:https://yuzehuiic.github.io/,有任何改进建议也请评论区留言告诉我噢!


http://chatgpt.dhexx.cn/article/EX8Ujkd5.shtml

相关文章

搭建自己的github.io博客

搭建自己的github.io博客 github.io是基于github的repo管理,这意味着咱们对其是有觉得的控制,这个跟放在第三方的平台比,可控性要好太多。下面咱们将详细讲述如何基于github.io打造属于自己的博客网站。 要完成自己的github.io博客网站&…

github个人博客快速搭建教程

文章目录 首先搭建起一个github博客1 左上角标题及简介以及下方的介绍2 评论和访客数3 文章4 Home Archives Categories 和 Tags5 Collections6 Demo7 About 首先搭建起一个github博客 首先建立一个个人博客github仓库。其实只要把 需要的代码 fork下来, 仓库名改为自己的{{gi…

如何使用Github搭建个人博客

介绍 在本文中,我将介绍如何使用GitHub搭建个人博客(免费)。GitHub是一个功能强大的版本控制和协作平台,它也可以用来托管和发布静态网页。通过将你的个人博客托管在GitHub上,你可以享受到版本控制的好处,…

github完成个人博客的搭建过程

依托于github完成个人博客的搭建过程,但目前只完成了基础部分 Todo: {% cb 评论功能,false, false %} {% cb 版权信息,false, false %} {% cb 页面个性化,false, false %} {% cb 云服务器部署,false, false %}  阿里云学生免费领取6个月 {% cb 公网IP访问,false, f…

php书写规范

一、基本约定 1、源文件 &#xff08;1&#xff09;纯PHP代码源文件只使用 <?php 标签&#xff0c;省略关闭标签 ?> &#xff1b; &#xff08;2&#xff09;源文件中PHP代码的编码格式必须是无BOM的UTF-8格式&#xff1b; &#xff08;3&#xff09;使用 Unix LF(换…

SQL书写规范

SQL书写规范可以参考&#xff1a; SQL样式指南 SQL style guide by Simon Holywell

实验报告怎么写之书写规范

实验报告怎么写之书写规范 前几天交深度学习实验报告&#xff0c;由于写得太随意被助教师姐给批了… 之前一直觉得写报告是件特别烦人的事&#xff0c;随便写写就完事了&#xff0c;而且之前课程的实验对报告规范也都无要求&#xff0c;所以我就养成了随便写报告的习惯。但是…

vlc下载视频

好久没有用这个功能&#xff0c;今天突然使用一下发现不知道怎么用了&#xff0c;特此记录。 环境 OS&#xff1a;mac VLC&#xff1a;3.0.6, 官方下载地址&#xff1a;https://www.videolan.org/vlc/index.htmlWindows下载地址&#xff1a;https://www.videolan.org/vlc/do…

Linux 虚拟机与 Linux Live 镜像

Linux 虚拟机与 Linux Live 镜像各有优势&#xff0c;也有不足。 首先我得承认&#xff0c;我非常喜欢频繁尝试新的 Linux 发行版本。然而&#xff0c;我用来测试它们的方法根据每次目标而有所不同。在这篇文章中&#xff0c;我们来看看两种运行 Linux 的模式&#xff1a;虚拟…

kkfileView linux x86架构 离线安装

文章目录 前言一、安装 LiberOffice二、安装kkfileView1.下载安装包2.启动 总结 前言 本文提供的所有文件不支持arm架构的linux系统。 一、安装 LiberOffice 下载https://kkfileview.keking.cn/LibreOffice_7.1.4_Linux_x86-64_rpm.tar.gz 安装 tar -zxvf LibreOffice_7.1.4…

linux live cd哪个好,最佳的 Linux LiveCD

5. 最佳的 Linux LiveCD —— KNOPPIX 国内应该很多人对 KNOPPIX 不太熟悉&#xff0c;KNOPPIX是一套光盘启动的GNU/Linux系统(LiveCD)&#xff0c; 功能包括&#xff1a;自动硬件监测、支持常见的显卡、声卡、SCSI和USB设备&#xff0c;以及其它外设。KNOPPIX可用于Linux演示、…

4K Video Downloader(4K视频下载器)V6.2.26版本发布

今天&#xff0c;4K Video Downloader V6.2.26版本正式发布啦&#xff01;该版本更新了核心算法&#xff0c;解决了若干个Bug&#xff0c;强化了视频下载功能。赶紧下载新版本体验吧&#xff01;下载地址&#xff1a;https://www.4kvideodownloader.com/ 4K Video Downloader V…

在Linux下的VLC视频推流(Ubuntu16.04)

VLC这个工具就不介绍了&#xff0c;本次是调用笔记本自带的摄像头&#xff0c;在主机与虚拟机之间进行推流。 采用udp方式&#xff0c;失败了&#xff0c;下面介绍一种成功的推流方式。 打开虚拟机与VLC。 在VLC中&#xff0c;媒体–打开捕获设备&#xff1a; 更改相关参数&am…

如何在Linux下逛B站看视频

因为学习尚硅谷MySQL高级特性篇的需要&#xff0c;我心想着要是能在Linux下边看视频边操作数据库就好了&#xff0c;但Linux自带的火狐浏览器没有flash无法观看视频&#xff0c;按照提示去下载&#xff0c;发现没有linux版本的flash&#xff0c;询问客服后得知&#xff0c;flas…

Linux 上最好的视频编辑软件

概要&#xff1a;这里介绍 Linux 上几个最好的视频编辑器&#xff0c;介绍它们的特性、利与弊&#xff0c;以及如何在你的 Linux 发行版上安装它们。 我们曾经在一篇短文中讨论过 Linux 上最好的照片管理应用&#xff0c;Linux 上最好的代码编辑器。今天我们将讨论 Linux 上最好…

linux中的livecd、liveDVD和其他安装方式简介

下载了几种不同格式的centos版本的iso文件&#xff0c;从而对比下各种iso文件的差别&#xff0c;下载的内容如下&#xff1a; 公众号&#xff1a;SRE艺术 下载之后&#xff0c;分别在虚拟机中进行安装&#xff0c;从而查看有何区别&#xff1a; 1、 使用LiveCD进行安装 在选择…

linux看电视的软件下载,Kdenlive下载安装-Linux系统上最强视频编辑器

Kdenlive是一款开源的非线性视频编辑器&#xff0c;Kdenlive可以安装在Linux、OS X、Windows、FreeBSD和NetBSD操作系统上。对于基本的视频编辑来说&#xff0c;kdenlive是绰绰有余的。它依赖于多个其他的开源项目&#xff0c;如ffmpeg&#xff0c;MLT视频框架和Frei0r特效。最…

python语言的优势-Python语言的七大优势

原标题&#xff1a;Python语言的七大优势 Python 是一门更注重可读性和效率的语言&#xff0c;尤其是相较于 Java&#xff0c;PHP 以及 C 这样的语言&#xff0c;它的这两个优势让其在开发者中大受欢迎。 诚然&#xff0c;它有点老了&#xff0c;但仍是80后啊 —— 至少没有 C…

python简介以及优点

​ ​ 活动地址&#xff1a;CSDN21天学习挑战赛 1 Python定义 Python 是一种简单易学并且结合了解释性、编译性、互动性和面向对象的脚本语言。Python提供了高级数据结构&#xff0c;它的语法和动态类型以及解释性使它成为广大开发者的首选编程语言。 Python 是解释型语言&am…

学习python有哪些优势

Python是什么?许多人提到python会联想到大数据相关&#xff0c;其实它不仅仅能被用于大数据、应用场景还有许多&#xff0c;可以说&#xff0c;学会python将能给大家带来许多帮助。那么&#xff0c;学习python到底有哪些优势?下面就由我来跟大家具体分析和介绍一下&#xff0…