超详细Hexo+Github博客搭建小白教程(一)

本文涉及的产品
.cn 域名,1个 12个月
简介: 超详细Hexo+Github博客搭建小白教程

我的博客源代码地址


大家可以直接素质二连,star&fork我的博客源代码:https://github.com/godweiyang/hexo-matery-modified,然后改改配置就可以写文章啦。

为了减小源码的体积,我将插件目录 node_modules进行了压缩,大家下载完后需要解压。另外添加水印需要的字体文件我也删除了,大家可以直接从电脑自带的字体库中拷贝。

  • 首先运行 git clone git@github.com:godweiyang/hexo-matery-modified.git将所有文件下载到本地。
  • 解压 node_modules.zip,然后删除 node_modules.zip.git文件夹。
  • 还缺一个字体(为图片添加水印需要用到),去 C:\Windows\Fonts下找到 STSongRegular,复制到 hexo-matery-modified文件夹下。

快速搭建


如果你不想自己从头开始慢慢自定义主题的话,可以直接下载我的修改好的主题,然后稍微修改几个地方就好了:

  • 根目录配置文件 _config.yml和主题目录配置文件 _config.yml中修改个人信息。
  • 根目录配置文件中修改 deploy一栏的 repository
  • 根目录配置文件中修改 baidu_url_submit一栏的 token
  • 主题配置文件中修改 gitalk一栏,修改方法见正文。

当然前提是个性化设置章节之前的环境还是需要配置好!

平时常用命令:

  1. hexo g  # 生成博客网页文件
  2. hexo s  # 本地预览博客
  3. hexo d  # 上传网页文件到github

前言


17年9月的时候开始搭建了第一个自己的独立博客,到现在也稍微像模像样了。很多小伙伴应该也想过搭建一个自己的博客,网上也有一堆详细教程。我在此稍稍总结一下具体的搭建步骤,另外网上很少有修改博客源码的个性化教程,我就稍稍分享一下我的一些修改经验,更多的个性化操作需要你自己以后去摸索。

具体效果可以参观我的博客:godweiyang.com,欢迎大家支持。

我不是一个前端程序员,有些东西不是很了解,写的有问题或有改进的地方请大家指出。

首先要了解一下我们搭建博客要用到的框架。Hexo是高效的静态站点生成框架,它基于Node.js。通过Hexo,你可以直接使用Markdown语法来撰写博客。相信很多小伙伴写工程都写过README.md文件吧,对,就是这个格式的!写完后只需两三条命令即可将生成的网页上传到你的github上,然后别人就可以看到你的网页啦。是不是很简单?你无需关心网页源代码的具体细节,你只需要用心写好你的博客内容就行。

目录结构

  • 安装Node.js
  • 添加国内镜像源
  • 安装Git
  • 注册Github账号
  • 安装Hexo
  • 连接Github与本地
  • 写文章、发布文章
  • 绑定域名
  • 备份博客源文件
  • 博客源代码下载
  • 个性化设置(matery主题)
  • 常见问题及解答(FAQ)
  • 个性化设置(beantech主题,已停更)

安装Node.js


首先下载稳定版Node.js,我这里给的是64位的。

安装选项全部默认,一路点击 Next

最后安装好之后,按 Win+R打开命令提示符,输入 node-vnpm-v,如果出现版本号,那么就安装成功了。

添加国内镜像源


如果没有梯子的话,可以使用阿里的国内镜像进行加速。

  1. npm config set registry https://registry.npm.taobao.org

安装Git


为了把本地的网页文件上传到github上面去,我们需要用到分布式版本控制工具————Git[下载地址]。

安装选项还是全部默认,只不过最后一步添加路径时选择 UseGitfromtheWindowsCommandPrompt,这样我们就可以直接在命令提示符里打开git了。

安装完成后在命令提示符中输入 git--version验证是否安装成功。

注册Github账号


接下来就去注册一个github账号,用来存放我们的网站。大多数小伙伴应该都有了吧,作为一个合格的程序猿(媛)还是要有一个的。

打开https://github.com/,新建一个项目,如下所示:

image.png

然后如下图所示,输入自己的项目名字,后面一定要加 .github.io后缀,README初始化也要勾上。名称一定要和你的github名字完全一样,比如你github名字叫 abc,那么仓库名字一定要是 abc.github.io

image.png

然后项目就建成了,点击 Settings,向下拉到最后有个 GitHubPages,点击 Choosea theme选择一个主题。然后等一会儿,再回到 GitHubPages,会变成下面这样:

image.png

点击那个链接,就会出现自己的网页啦,效果如下:

image.png

安装Hexo


在合适的地方新建一个文件夹,用来存放自己的博客文件,比如我的博客文件都存放在 D:\study\program\blog目录下。

在该目录下右键点击 GitBashHere,打开git的控制台窗口,以后我们所有的操作都在git控制台进行,就不要用Windows自带的控制台了。

定位到该目录下,输入 npm i hexo-cli-g安装Hexo。会有几个报错,无视它就行。

安装完后输入 hexo-v验证是否安装成功。

然后就要初始化我们的网站,输入 hexo init初始化文件夹,接着输入 npm install安装必备的组件。

这样本地的网站配置也弄好啦,输入 hexo g生成静态网页,然后输入 hexo s打开本地服务器,然后浏览器打开http://localhost:4000/,就可以看到我们的博客啦,效果如下:

image.png

ctrl+c关闭本地服务器。

连接Github与本地


首先右键打开git bash,然后输入下面命令:

  1. git config --global user.name "godweiyang"
  2. git config --global user.email "792321264@qq.com"

用户名和邮箱根据你注册github的信息自行修改。

然后生成密钥SSH key:

  1. ssh-keygen -t rsa -C "792321264@qq.com"

打开github,在头像下面点击 settings,再点击 SSHandGPG keys,新建一个SSH,名字随便。

git bash中输入

  1. cat ~/.ssh/id_rsa.pub

将输出的内容复制到框中,点击确定保存。

输入 ssh-T git@github.com,如果如下图所示,出现你的用户名,那就成功了。

image.png

打开博客根目录下的 _config.yml文件,这是博客的配置文件,在这里你可以修改与博客相关的各种信息。

修改最后一行的配置:

  1. deploy:
  2.  type: git
  3.  repository: https://github.com/godweiyang/godweiyang.github.io
  4.  branch: master

repository修改为你自己的github项目地址。

写文章、发布文章


首先在博客根目录下右键打开git bash,安装一个扩展 npm i hexo-deployer-git

然后输入 hexonewpost"article title",新建一篇文章。

然后打开 D:\study\program\blog\source\_posts的目录,可以发现下面多了一个文件夹和一个 .md文件,一个用来存放你的图片等数据,另一个就是你的文章文件啦。

编写完markdown文件后,根目录下输入 hexo g生成静态网页,然后输入 hexo s可以本地预览效果,最后输入 hexo d上传到github上。这时打开你的github.io主页就能看到发布的文章啦。

绑定域名


现在默认的域名还是 xxx.github.io,是不是很没有牌面?想不想也像我一样弄一个专属域名呢,首先你得购买一个域名,xx云都能买,看你个人喜好了。

以我的百度云为例,如下图所示,添加两条解析记录:

image.png

然后打开你的github博客项目,点击 settings,拉到下面 Customdomain处,填上你自己的域名,保存:

这时候你的项目根目录应该会出现一个名为 CNAME的文件了。如果没有的话,打开你本地博客 /source目录,我的是 D:\study\program\blog\source,新建 CNAME文件,注意没有后缀。然后在里面写上你的域名,保存。最后运行 hexo ghexo d上传到github。

备份博客源文件


有时候我们想换一台电脑继续写博客,这时候就可以将博客目录下的所有源文件都上传到github上面。

首先在github博客仓库下新建一个分支 hexo,然后 git clone到本地,把 .git文件夹拿出来,放在博客根目录下。

然后 git checkout hexo切换到 hexo分支,然后 git add.,然后 git commit-m"xxx",最后 git push origin hexo提交就行了。

当然我新建了一个仓库存放了源文件,具体效果可以看我的博客源文件仓库:https://github.com/godweiyang/hexo-matery-modified。大家也可以先用下文hexo安装方法安装完hexo,然后直接 git clone git@github.com:godweiyang/hexo-matery-modified.git克隆我的所有源文件,然后这是我修改完的基本没bug的定制化的博客,就可以直接拿来用啦。

我这个源文件和原来的主题没有什么区别,只是我把插件都安装完了,有些小bug也修复了,所以拿来就能直接用,方便大家。

相关文章
|
21天前
|
JSON 缓存 JavaScript
使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
使用 jsDelivr 加速 GitHub Pages 的图片资源和动态编译的 JSON 资源。
21 2
|
2月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
3月前
|
存储 Linux Go
如何在Github上Pull Request的教程
关于如何在GitHub上发起Pull Request(合并请求)的详细教程,包括Fork(分支)、Clone(克隆)、创建新分支、修改代码、提交更改、推送到远程仓库等步骤,并提供了解决权限问题的方法,如创建个人访问令牌(Personal Access Token)。
94 6
|
3月前
|
数据采集 数据可视化 Ruby
GitHub星标破万!Python学习教程(超详细),真的太强了!
Python 是一门初学者友好的编程语言,想要完全掌握它,你不必花上太多的时间和精力。 Python 的设计哲学之一就是简单易学,体现在两个方面: 1. 语法简洁明了:相对 Ruby 和 Perl,它的语法特性不多不少,大多数都很简单直接,不玩儿玄学。 2. 切入点很多:Python 可以让你可以做很多事情,科学计算和数据分析、爬虫、Web 网站、游戏、命令行实用工具等等等等,总有一个是你感兴趣并且愿意投入时间的。
怎样在GitHub上建立仓库、以及怎样实现分支代码的合并。保姆级别的教程
这篇文章是一份详细的GitHub使用教程,介绍了如何在GitHub上创建仓库、创建分支、编辑和发布更改内容、发起拉取请求以及合并分支的操作步骤。
怎样在GitHub上建立仓库、以及怎样实现分支代码的合并。保姆级别的教程
|
3月前
|
SQL 运维 安全
GitHub爆赞的Web安全防护指南,网络安全零基础入门必备教程!
web安全现在占据了企业信息安全的很大一部分比重,每个企业都有对外发布的很多业务系统,如何保障web业务安全也是一项信息安全的重要内容。 然而Web 安全是一个实践性很强的领域,需要通过大量的练习来建立对漏洞的直观认识,并积累解决问题的经验。 Web安全与防护技术是当前安全界关注的热点,今天给小伙伴们分享的这份手册尝试针对各类漏洞的攻防技术进行体系化整理,从漏洞的原理到整体攻防技术演进过程进行详细讲解,从而形成对漏洞和web安全的体系化的认识。
|
3月前
|
SQL 运维 安全
GitHub爆赞的Web安全防护指南,网络安全零基础入门必备教程!
web安全现在占据了企业信息安全的很大一部分比重,每个企业都有对外发布的很多业务系统,如何保障web业务安全也是一项信息安全的重要内容。 然而Web 安全是一个实践性很强的领域,需要通过大量的练习来建立对漏洞的直观认识,并积累解决问题的经验。 Web安全与防护技术是当前安全界关注的热点,今天给小伙伴们分享的这份手册尝试针对各类漏洞的攻防技术进行体系化整理,从漏洞的原理到整体攻防技术演进过程进行详细讲解,从而形成对漏洞和web安全的体系化的认识。
|
4月前
|
网络协议 Unix Linux
网安人必须人手一份的《Linux私房教程》,GitHub星标286K!
Linux是一套免费使用和自由传播的操作系统内核,是一个基于POSIX和Unix的多用户、多任务支持多线程和多CPU的操作系统内核。它能运行主要的Unix工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统内核。 作为网络安全的初学者,Linux基础知识和常用命令是我们的必备技能,我们不能只会操作Windows相关的工具。一方面很多网站都是基于Linux环境搭建,比如LAMP,其安全性更好;另一方面,很多命令或工具都集成在了Linux相关环境中,比如Kali等。 今天给小伙伴们分享一份Linux私房教程,这份
|
5月前
|
算法 数据可视化 数据挖掘
大学生必备!GitHub星标破千的matlab教程(从新手到骨灰级玩家)
MATLAB(Matrix Laboratory)是MathWorks公司推出的用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境的商业数学软件。 MATLAB具有数值分析、数值和符号计算、工程与科学绘图、数字图像处理、财务与金融工程等功能,为众多科学领域提供了全面的解决方案。
|
5月前
|
程序员 Python
GitHub爆赞!最适合新手入门的教程——笨方法学Python 3
“Python 是一门既容易上手又强大的编程语言。”这句话本身并无大碍,但需要注意的是,正因为它既好学又好用,所以很多 Python 程序员只用到了其强大功能的一小部分。 今天给小伙伴们分享的这份手册以习题的方式引导读者一步一步学习编程,从简单的打印一直讲到完整项目的实现。