hexo 本地编辑md文件_利用Hexo和Github Page搭建个人Blog

最新推荐文章于 2023-08-30 09:54:09 发布
最新推荐文章于 2023-08-30 09:54:09 发布
阅读量108 收藏
点赞数
文章标签： hexo 本地编辑md文件

之前使用wordpress在AWS上搭建的博客，但国内访问速度堪忧，而且费用也不少，于是觉得切到Github上，最终觉得通过Hexo和Github Page重新搭建博客，这篇文章记录整个搭建的过程，分享给大家。

一、注册域名并绑定Github Page

  1. 注册Github和域名就不多说了，网上一搜一大推，接着去Github新建一个仓库，名为个人ID加 github.io，例如我的就是XXXX.github.io
a81ce68e22cc5fe7a7522d2d7afaa262.png
  1. 然后在该仓库下找到一个文件 CNAME， 打开后将里面的值修改为你博客的域名，例如我的 blog.XXXX.com
01fcf7e11f7a443d693ec794d46d43fb.png

注册完域名后添加一条CNAME记录，然后解析到github Page的地址，我的域名是在Godaddy上注册，添加一个CNAME指向github.io，像这样：

4f1ced5999df5838c84202ab3f0a6e30.png

这样你就可以通过自己的域名访问GitHub Page了。

二、安装Hexo

之所以选择Hexo是因为Hexo看上去非常简洁而且支持Markdown，符合我的期望，安装也很方便。

  1. 准备工作：Hexo 需要NodeJ.js和git
Git
  • Windows：下载并安装 git.
  • Mac：使用 Homebrew, MacPorts ：brew install git;或下载 安装程序 安装。
  • Linux (Ubuntu, Debian)：sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

Node.js

安装 Node.js 的最佳方式是使用 nvm。

cURL:

 $ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

 $  wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

 nvm install stable

或者您也可以下载 安装程序 来安装。

Windows 用户

对于windows用户来说，建议使用安装程序进行安装。安装时，请勾选Add to PATH选项。另外，您也可以使用Git Bash，这是git for windows自带的一组程序，提供了Linux风格的shell，在该环境下，您可以直接用上面提到的命令来安装Node.js。打开它的方法很简单，在任意位置单击右键，选择“Git Bash Here”即可。由于Hexo的很多操作都涉及到命令行，您可以考虑始终使用Git Bash来进行操作。

  1. 安装Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

 $   npm install -g hexo-cli

三、建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

 $    hexo init   $   cd   $   npm install

新建完成后，指定文件夹的目录如下：

.├── _config.yml├── package.json├── scaffolds├── source|   ├── _drafts|   └── _posts└── themes

_config.yml

网站的 配置 信息，您可以在hexo官网配置大部分的参数。

package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。对应安装可参考官网。

package.json{  "name": "hexo-site",  "version": "0.0.0",  "private": true,  "hexo": {    "version": ""  },  "dependencies": {    "hexo": "^3.0.0",    "hexo-generator-archive": "^0.1.0",    "hexo-generator-category": "^0.1.0",    "hexo-generator-index": "^0.1.0",    "hexo-generator-tag": "^0.1.0",    "hexo-renderer-ejs": "^0.1.0",    "hexo-renderer-stylus": "^0.2.0",    "hexo-renderer-marked": "^0.2.4",    "hexo-server": "^0.1.2"  }}

scaffolds

模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

四、NexT 主题

Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下， 然后修改下配置文件即可。具体到 NexT 来说，安装步骤如下。

  1. 下载主题

如果你熟悉 Git， 建议你使用 克隆最新版本 的方式，之后的更新可以通过 git pull 来快速更新， 而不用再次下载压缩包替换。

  • 克隆最新版本

在终端窗口下，定位到 Hexo 站点目录下。使用 Git checkout 代码：

$ cd your-hexo-site$ git clone https://github.com/iissnan/hexo-theme-next themes/next
  1. 启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。

theme: next

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好使用 hexo clean 来清除 Hexo 的缓存。

  1. 验证主题

首先启动 Hexo 本地站点，并开启调试模式(即加上 --debug)，整个命令是 hexo s --debug。 在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误。 当命令行输出中提示出：

INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse

2cbcf2e45816c81345cec3f272fe9a77.png

现在，你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定，包括个性化以及集成第三方服务。

更多配置可以访问NexT官网获取。

五、写作

你可以执行下列命令来创建一篇新文章。

$ hexo new [layout]

您可以在命令中指定文章的布局(layout)，默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

  1. 布局(Layout)

Hexo 有三种默认布局：post、page 和 draft，它们分别对应不同的路径，而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

布局 | 路径

post | source/_posts

page | source

draft | source/_drafts

不要处理我的文章

如果你不想你的文章被处理，你可以将 Front-Matter 中的layout: 设为 false 。

  1. 文件名称

Hexo 默认以标题作为文件名称，但您可编辑 new_post_name 参数来改变默认的文件名称，举例来说，设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。

变量 | 描述

:title | 标题(小写，空格将会被替换为短杠)

:year | 建立的年份，比如， 2015

:month | 建立的月份(有前导零)，比如， 04

:i_month | 建立的月份(无前导零)，比如， 4

:day | 建立的日期(有前导零)，比如， 07

:i_day | 建立的日期(无前导零)，比如， 7

  1. 草稿

刚刚提到了 Hexo 的一种特殊布局：draft，这种布局在建立时会被保存到 source/_drafts 文件夹，您可通过 publish 命令将草稿移动到 source/_posts 文件夹，该命令的使用方式与 new 十分类似，您也可在命令中指定 layout 来指定布局。

$ hexo publish [layout]

草稿默认不会显示在页面中，您可在执行时加上 --draft 参数，或是把 render_drafts 参数设为 true来预览草稿。

  1. 模版(Scaffold)

在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件，例如：

$ hexo new photo "My Gallery"

在执行这行指令时，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，并根据其内容建立文章，以下是您可以在模版中使用的变量：

变量 | 描述

layout | 布局

title | 标题

date | 文件建立日期

  1. 生成文件

修改 _config.yml 文件：

# Directorysource_dir: sourcepublic_dir: path/to/your/github/resp # 指向本地仓库，方便提交

使用 Hexo 生成静态文件快速而且简单。

$ hexo generate
  1. 监视文件变动

Hexo 能够监视文件变动并立即重新生成静态文件，在生成时会比对文件的 SHA1 checksum，只有变动的文件才会写入。

$ hexo generate --watch

如上：我的个人网站就搭建成功了。不知道大家学会了吗？

如果喜欢这篇文章，可以关注我的头条号@职场大表姐，我会定期分享一些职场技能提升技巧哦！如果你有什么想看的，记得留言给我^_^

weixin_39603588
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
hexo 本地编辑md文件_使用hexo新建、编辑并预览文章
weixin_39636333的博客
11-24 1237
阅读本文之前，你应当已经搭建并部署好了hexo博客，如果没有我推荐一个实战视频。本文将介绍如何在hexo博客中创建、编辑、预览文章，以及如何自定义主题。最后还记录了一些个人部署博客时遇到的坑。新建文章文章 命令：hexo new [layout] title或 hexo n [layout] title 创建文章前要先选定模板，在hexo中也叫做布局。hexo支持三种布局（layout）：post...
手把手教你用Hexo+Github 搭建属于自己的博客_hexo如何把git的源码主题和自己的融合一起
2401_84166672的博客
04-20 1205
NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下 图标模糊的问题。设定菜单内容，对应的字段是 menu。在菜单图标开启的情况下，如果菜单项与菜单未匹配（没有设置或者无效的 Font Awesome 图标名字） 的情况下，NexT 将会使用 作为图标。比如我的电脑下的 F:\hexo 目录下的成为 站点配置文件，F:\hexo\themes\next 目录下的成为主题配置文件。
使用Hexo免费搭建并发布个人博客网站.md
06-22
Hexo搭建个人博客
hexo 本地编辑md文件_hexo+github pages搭建博客站全过程记录
weixin_39900608的博客
11-27 110
本文共2800余字，预计阅读时间12分钟，本文知乎连接：hexo+github pages搭建博客站全过程记录，本文同步发布于silaoA的博客和微信公众号平台。 关注了解更多的Cygwin、Linux技术。目录 0x00 目标与思路0x01 github新建repo并配置key0x02 本地配好repo0x03 用新分支管理源文件0x04 在其他机器上协作更多阅读理解本文内容需有git、gith...
hexo之next主题优化篇1
每天进步一点点
01-28 2558
这篇博客完成的时候已经是现在了，首先给大家拜个晚年，祝大家新年快乐！ 好的还是不好的都已经过去了，希望大家不要为旧的忧伤浪费新的眼泪。 上一篇博客介绍了如何搭建 hexo 环境，最近放假在家有时间(而且为了安全更不能出门)可以更博，所以打算将环境优化篇内容完成，做一个简单的总结（是不是转的有点快_）! 主题优化最重要的一部分内容就是修改 _config.yml 文件，我们把它叫站点配置文件，在我们...
Hexo博客新建文章
野猿新一
06-24 7224
命令行 创建一篇新的文章，输入如下命令，其中<title>替换成你的文章标题 $ hexo new <title> 或者 $ hexo new post <title> 实际运行 可以看到创建的文件在/source/_posts路径下 D:\hexo\blog>hexo new 我的第一篇博文 INFO Created: D:\h...
hexo点击博客后标题不显示
weixin_44999716的博客
01-10 1346
hexo点击博客后标题不显示 ​ 电脑修好后重新配置了hexo博客的环境，但是发现点击博客后标题不显示，如图片样子 想想应该是上传时的编码问题，因为上传标题乱码了， 目前没有找到通过乱码的解决方法，但是找到了另一个解决方法，就是在每次执行上传的操作hexo clean、hexo g、hexo d的地方，采用 hexo n "你的标题名称" 例：hexo n "Hello world" ，最终发现在每个.md文本最前面加上这句 便可以在博客中显示标题了。 ...
GitHub hexo搭建个人博客
06-10
### GitHub + Hexo 搭建个人博客详细指南 #### 一、准备工作 在开始之前，确保已经具备以下条件： 1. **操作系统**: 本文档假设使用的操作系统为 Windows 7 64 位。 2. **域名**: 如果想要拥有一个自定义的域名，...
Hexo + github page 实现搭建博客.pdf
08-20
总结来说，Hexo+Github Page搭建博客的流程包括：安装Node.js和Git，配置Github Page，安装Hexo框架，配置主题，添加SSH密钥，以及进行文章撰写、生成和部署。这个过程不仅涉及到了前端静态页面的生成，还包括了后端...
毕业设计-大学期间以hexo和Github page搭建的个人博客记录学习路上的点点滴滴以大学的算法为主因为大学.zip
04-25
本资源是经过本地编译测试、可打开、可运行的项目、文件或源码，可以用于毕业设计、课程设计的应用、参考和学习需求，请放心下载。 祝愿你在这个毕业设计项目中取得巨大进步，顺利毕业！ 但还需强调一下，这些项目...
手把手教你使用Hexo+GitHub搭建个人博客并发布文章（附常见问题解决方法）
qq_59016701的博客
08-30 4315
本教程使用GitHub自带的GitHub pages来生成静态个人博客，而Hexo可以更换各种好看的主题，而且都是免费的，花一点时间就可以打造出自己独有的个人博客。Hexo这个有力的工具可以让我们专注于写出一篇博客而不需要关心如何编写html和CSS，再如何形成一个网站，它可以根据markdown文档和指定的主题直接生成一个静态网站，对于新手朋友或者不是专门搞前端开发的人们非常友好。
Hexo博客使用PDF.js
LTFan
03-21 750
clone了一个pdf.js 然后兴高采烈地到文章里使用{% pdf %}标签 结果浏览器弹出了个下载框（使用GitHub的raw） 不知道是不是因为使用GitHub的原因导致这个问题 后来我测试的时候报了个错 CSDN上的解决方法 到时候我再试试把资源放回lib/里面看看行不行 目录1.clone1.1.官方方法1.2.NexT主题方法1.3.补充2.修改文件2.1.修改viewer.htm...
GitHub中Hexo next主题下搭建的博客中增加PDF插件
1/0=∞
05-30 4794
需求：希望能在GitHub搭建的博客中上传本地PDF文件，同时提供下载功能。实现：网上有大神已经写好一个插件，具体实现如下：在博客bash中执行下列命令安装$ npm install --save hexo-pdf      2.使用2. 使用外部文章网页链接{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %} 本地，即...
如何在Hexo中对文章md文件分类
热门推荐
一个码农的博客
12-23 1万+
Hexo是一个快速、简洁且高效的博客框架，常用在Github Page上部署个人博客。 起因 在默认配置下，我们使用hexo new post [title]会在source/_post/目录下生成对应的markdown文件，而使用hexo g生成的html文件路径是:year/:month/:day/:title.html。当我们写的博客越来越多的时候，会发现，所有文章都是在source/_po...
Hexo，创建属于你自己的博客
1022_zhang的专栏
01-23 9121
前言： Node.js+Hexo+Next+Git+GitHub，让你几分钟就能创建一个博客 网上很多资料由于版本原因，实现方法已经发生变化，这里贴出一些新版本更方便的方法，如果失效，请联系我 本系列文章 所提及方案全部经过实验证明有效，基于Node 8.9.4,Hexo 3.4.4 ,Next 5.1.4 本文首发于我的博客，国内访问节点 ta
常用芯片手册芯片资料MAX260常用芯片手册芯片资料MAX260
最新发布
08-31
常用芯片手册芯片资料MAX260常用芯片手册芯片资料MAX260提取方式是百度网盘分享地址
常用芯片手册芯片资料82530常用芯片手册芯片资料82530
08-31
常用芯片手册芯片资料82530常用芯片手册芯片资料82530提取方式是百度网盘分享地址
全国互联网网民数和互联网普及率.xlsx
08-31
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141286857 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 各省、地级市、区县互联网普及率、宽带接入户数和电话用户数等 1、全国互联网网民数和互联网普及率（1997-2020年）； 2、各省互联网网民数和互联网普及率（1997-2016年）； 3、地级市互联网宽带接入用户（1996-2020年）； 4、各区县电话用户数（2004-2019年）
SQLAlchemy-2.0.30-cp37-cp37m-musllinux_1_1_x86_64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
利用github hexo搭建个人博客
10-17
好的，下面是利用 Github 和 Hexo 搭建个人博客的步骤： 1. 注册 Github 账号并创建一个新的仓库，仓库名为 `username.github.io`，其中 `username` 是你的 Github 用户名。 2. 安装 Node.js 和 Git。 3. 在命令行中输入以下命令安装 Hexo： ``` npm install -g hexo-cli ``` 4. 在本地创建一个新的 Hexo 博客： ``` hexo init blog cd blog npm install ``` 5. 修改 Hexo 的配置文件 `_config.yml`，将 `deploy` 部分的 `type` 改为 `git`，并将 `repo` 改为你在第一步中创建的仓库地址： ``` deploy: type: git repo: git@github.com:username/username.github.io.git branch: master ``` 6. 生成静态文件并部署到 Github Pages： ``` hexo generate hexo deploy ``` 7. 打开浏览器，访问 `https://username.github.io`，就可以看到你的个人博客了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值