热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【保姆级】利用Github搭建自己的个人博客,看完就会

保姆,级,利用,github,搭建,自己的,个人

大家好,我是辰哥~

作为一名喜欢技术的爱好者,平时喜欢把自己学习技术的心得或者一些踩坑、易错的过程记录下来,首选的是技术平台(博客),今天辰哥来教大家如何利用Github来搭建一个自己的个人博客平台。

相信Github大家都有听过,甚至是经常用,除了可以作为开源源码的交流平台,还提供了搭建博客的功能。目前一些大佬、老师的博客用的就是Github搭建的(辰哥见过很多)

访问地址:

https://liyunchen.github.io

01、环境准备

在搭建Github博客之前,先准备一下环境(安装下方的顺序来安装,别弄混了)

1.安装git

官方地址:https://git-scm.com/

1、访问git官方地址,下载对应的安装包,进行安装(简单的点击下一步)。

2、安装好之后,鼠标右键可以看到:Git Bash Here,点击后打开了。

3、输入:git --version

出现这个说明git安装成功。

2.安装node.js

官方地址:https://nodejs.org/en/download/

1、访问nodejs官方地址,下载对应的安装包,进行安装(简单的点击下一步)。

2、安装好之后,配置环境变量,并在终端里面输入:node -v

出现这个说明nodejs安装成功~

3.安装Hexo

安装命令:npm install hexo -g

测试是否安装成功,命令:hexo -v

4.安装hexo依赖

命令:npm install --save hexo-deployer-git

02、git配置SSH key

相信看到本文的你应该听过github,并且也注册了自己的github账号,如果现在还没有的可以去github注册一个账号。

为什么要配置SSH key?

目的:可以免密的将本地的源码和资源上传到github,无需要每次都输账号和密码。

先看本地是否配置好SSH key(命令:cd ~/.ssh)

这里辰哥之前就配置了,现在删除配置,重新配置一边,方便读者可以跟着进行配置。

再次查看

可以看到提示:/c/Users/Administrator/.ssh: No such file or directory

备注:

因为ssh配置好之后是保存到 c:/用户/Administrator/.ssh

1.配置ssh

先生成ssh key

ssh-keygen -t rsa -C "邮件地址"

备注:这里的邮件地址是github账号绑定的邮件地址

输入生成命令:ssh-keygen -t rsa -C "邮件地址"后。连续回车三次即可

可以看到在用户文件夹下生成了一个ssh文件夹

进入到ssh文件夹,复制id_rsa.pub文件里全部内容

接着打开github主页,点击个人设置,点击左侧的SSH and GPG keys,点击New SSH key 

将id_rsa.pub复制的内容粘贴到key中,title随便起一个就行。

点击 Add SSH key

测试是否成功:

ssh -T git@github.com

输入测试命令后,接着输入yes,出现下面这个提示说明成功

配置账号和密码

$ git config --global user.name "liyunchen" #你的github用户名 $ git config --global user.email "xxx@163.com" #填写你的github注册邮箱 

备注:用户名和邮箱记得改为 自己的

03 搭建个人博客

1.新建博客

开始之前先介绍一下heox的基本命令

hexo new "postName" #新建文章 hexo new page "pageName" #新建页面 hexo generate #生成静态页面至public目录 hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server) hexo deploy #部署到GitHub hexo help # 查看帮助 hexo version #查看Hexo的版本 

对应的缩写,比如:

hexo n == hexo new

hexo g == hexo generate

新建一个保存博客的存放目录,比如辰哥的是:D:\公众号\0722

进入到本地博客存放目录

初始化 个人博客

命令:hexo init

可以看到博客存放目录出现了如下内容:

#生成静态网页

命令:hexo g

#预览

命令:hexo s

报错解决:

问题:hexo g报错,line.mathALL is not funciton问题解决

原因:nodejs版本低于12

解决:两种方法

方法1)请将nodejs升级到高于12.0.0的版本

方法2)config.xml中的 highlight->enable的值从true更改为false,这样可以避免异常。

在浏览器这访问:

http://localhost:4000/

可以看到访问没问题。

但这个只是在本地预览,接着将这个博客部署到github。

2.部署到github

新建一个github仓库

给仓库起个名称,注意!注意!注意!

仓库名称格式: 用户名.github.io

辰哥的仓库名称为:liyunchen.github.io

因为这个仓库名称将作为你github博客的访问地址

编辑_config.yml,_config.yml在博客存放目录下

deploy: type: git repository: git@github.com:liyunchen/liyunchen.github.io.git branch: main 

repository仓库地址改为自己的

branch看自己的github仓库是master还是main,辰哥这里是main,所以就填写main

发布到github

命令:hexo d

在浏览器访问

https://liyunchen.github.io/

可以看到成功访问

这个博客地址已经是部署到了公网,感兴趣的读者也可以访问

04 编写博客

搭建好博客之后,日常中肯定是需要编写博客并且同步到github,辰哥来带大家写一篇博客

新建一篇名为:chenge-first-blog的博客

命令:hexo new 'chenge-first-blog'

查看对应的文件夹

可以看到生成了一个chenge-first-blog.md文件,通过这个md文件去写博客

默认的内容是这样的:

--- title: chenge-first-blog date: 2021-07-22 14:08:14 tags: --- 这里方开始编写正文 

开始编写博客内容(markdown格式)

这里辰哥以之前的一篇文章为例

其中的,作用是在查看文章的时候,点击more的时候再加载全部的文章内容

编写好之后,开始部署到github

1.生成html文件

hexo g

2.上传到github

hexo d

再次访问:

https://liyunchen.github.io/

可以看到编写的博客已经同步到github平台,并且的作用也可以看到了:read more

05 小结

本文从0到1搭建了自己的个人博客,过程很详细,并且可能会出现的错误都做出了说明和解决方法。绝对的保姆级教程,看完就会

希望看到本文的你可以给辰哥一个赞,点个再看就更好了,鼓励原创作者不断前进。最后附上辰哥搭建好的博客地址,所有人都有可以访问。

访问地址:

https://liyunchen.github.io


推荐阅读
  • 【实例简介】本文详细介绍了如何在PHP中实现微信支付的退款功能,并提供了订单创建类的完整代码及调用示例。在配置过程中,需确保正确设置相关参数,特别是证书路径应根据项目实际情况进行调整。为了保证系统的安全性,存放证书的目录需要设置为可读权限。值得注意的是,普通支付操作无需证书,但在执行退款操作时必须提供证书。此外,本文还对常见的错误处理和调试技巧进行了说明,帮助开发者快速定位和解决问题。 ... [详细]
  • 本文详细介绍了 InfluxDB、collectd 和 Grafana 的安装与配置流程。首先,按照启动顺序依次安装并配置 InfluxDB、collectd 和 Grafana。InfluxDB 作为时序数据库,用于存储时间序列数据;collectd 负责数据的采集与传输;Grafana 则用于数据的可视化展示。文中提供了 collectd 的官方文档链接,便于用户参考和进一步了解其配置选项。通过本指南,读者可以轻松搭建一个高效的数据监控系统。 ... [详细]
  • Git命令基础应用指南
    本指南详细介绍了Git命令的基础应用,包括如何使用`git clone`从远程服务器克隆仓库(例如:`git clone [url/path/repository]`)以及如何克隆本地仓库(例如:`git clone [local/path/repository]`)。此外,还提供了常见的Git操作技巧,帮助开发者高效管理代码版本。 ... [详细]
  • 为了确保iOS应用能够安全地访问网站数据,本文介绍了如何在Nginx服务器上轻松配置CertBot以实现SSL证书的自动化管理。通过这一过程,可以确保应用始终使用HTTPS协议,从而提升数据传输的安全性和可靠性。文章详细阐述了配置步骤和常见问题的解决方法,帮助读者快速上手并成功部署SSL证书。 ... [详细]
  • 本文介绍了 Vue 开发的入门指南,重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE,其下载地址为 。安装时请选择适合您操作系统的版本,并通过 获取激活码。WebStorm 是前端开发者的理想选择,提供了丰富的功能和强大的代码编辑能力。 ... [详细]
  • 在GitHub上克隆vue-element-admin项目时遇到依赖安装错误
    在 GitHub 上克隆 vue-element-admin 项目后,使用 `npm install` 安装依赖时遇到了未知的 Git 错误。具体错误信息为 `npm ERR! code 128`,提示命令执行失败。这可能是由于网络问题、Git 配置不正确或某些依赖包的仓库地址无效导致的。建议检查网络连接、更新 Git 版本并确保所有依赖项的 URL 正确无误。 ... [详细]
  • CentOS 7环境下Jenkins的安装与前后端应用部署详解
    CentOS 7环境下Jenkins的安装与前后端应用部署详解 ... [详细]
  • 本文详细介绍了在 CentOS 7 系统中配置 fstab 文件以实现开机自动挂载 NFS 共享目录的方法,并解决了常见的配置失败问题。 ... [详细]
  • Spark与HBase结合处理大规模流量数据结构设计
    本文将详细介绍如何利用Spark和HBase进行大规模流量数据的分析与处理,包括数据结构的设计和优化方法。 ... [详细]
  • 本文介绍如何使用 Python 的 DOM 和 SAX 方法解析 XML 文件,并通过示例展示了如何动态创建数据库表和处理大量数据的实时插入。 ... [详细]
  • php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]
  • 开机自启动的几种方式
    0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]
  • 在ElasticStack日志监控系统中,Logstash编码插件自5.0版本起进行了重大改进。插件被独立拆分为gem包,每个插件可以单独进行更新和维护,无需依赖Logstash的整体升级。这不仅提高了系统的灵活性和可维护性,还简化了插件的管理和部署过程。本文将详细介绍这些编码插件的功能、配置方法,并通过实际生产环境中的应用案例,展示其在日志处理和监控中的高效性和可靠性。 ... [详细]
  • 深入解析:React与Webpack配置进阶指南(第二部分)
    在本篇进阶指南的第二部分中,我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例,我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序,具体包括 `TodoApp.js` 文件中的代码实现,如导入 React 和自定义组件 `TodoList`。此外,我们还将深入讲解 Webpack 配置文件的优化方法,以提升开发效率和应用性能。 ... [详细]
  • 公司计划部署邮件服务器,考虑到已有域名,决定自行搭建内部邮件服务器。经过综合考量,最终选择在Linux环境中进行搭建,并记录了相关配置和实践过程。本文将详细介绍Postfix的基本设置步骤和实践经验,帮助读者快速掌握邮件服务器的搭建方法。 ... [详细]
author-avatar
拐久了_618
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有