Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JERRY Hexo & GitHub 静态网站搭建说明

JERRY Hexo & GitHub 静态网站搭建说明

作者头像
迷路的朱朱
发布于 2023-04-13 00:52:24
发布于 2023-04-13 00:52:24
37401
代码可运行
举报
运行总次数:1
代码可运行

JERRY-Hexo-GitHub

《JERRY Hexo & GitHub 静态网站搭建说明》

非原创内容,转载请注明出处!

一、前言

1.1 什么是 Hexo?

一个基于 Node.js 设计的快速、简洁且高效的博客框架

  • 超快速度
  • 支持 Markdown
  • 一键部署
  • 插件和可扩展性
  • 免费开源

1.2 什么是 GitHub?

一个面向开源及私有软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式,故名 GitHub

  • 全球最活跃开源社区
  • 开源社交平台
  • 企业项目管理平台

1.3 什么是静态网站?

通俗的讲静态网站指:只有 前端 没有 后端 的网站,静态网站的所有页面内容在没有被修改的前提下都是固定不变的

适用于博客、固定页面展示等网站。

1.4 Hexo 与 GitHub 搭配建站的优缺点

(1)优点

  • 简单稳定
  • 开源免费
  • 社区活跃利于交流

(2)缺点:

  • 国内访问速度慢
  • 不支持动态网站搭建

二、安装 Git

2.1 什么是 Git?

Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目

使用 GitHub 必须有 Git

2.2 Git 的下载安装与配置

(1)下载安装

Git官网

选择对应系统版本下载,安装默认下一步即可。

(2)配置

打开终端键入以下命令:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ git --version

# 查看 git 版本号
# 若成功识别即为 git 安装成功
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ git config --global user.name "xxx"
$ git config --global user.email xxx@xxx.com

# 配置个人的用户名称和电子邮件地址
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ git config --list

# ...
# user.name=xxx
# user.email=xxx@xxx.com

# 检查已有的配置信息
# 若配置信息中出现正确用户名及邮箱即为配置成功

三、安装 Node.js

3.1 什么是 Node.js?

一个基于 Chrome V8 引擎的 JavaScript 运行环境,使用了一个事件驱动 、非阻塞式 I/O 模型,让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与 PHPPythonPerlRuby 等服务端语言平起平坐的 脚本语言

3.2 Node.js 的下载安装与配置

Node.js官网

选择对应系统的长期支持版下载,安装默认下一步即可。

安装完成,打开终端键入以下命令:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ node -v

# 查看 Node.js 版本
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ npm -v

# 查看 npm 包管理器版本

若以上两个命令都成功识别,那么 Node.js 便安装成功。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

# 利用 npm 下载国内淘宝镜像 cnpm
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ cnpm -v

# 查看 cnpm 版本
# 若以上命令成功识别,那么 cnpm 便安装成功

什么是 npm 和 cnpm ?

  • npm (node package manager):Node.js 的包管理器,用于 node 插件管理(包括安装、卸载、管理依赖等)。
  • cnpm:因为 npm 安装插件是从国外服务器下载,受网络的影响比较大,可能会出现异常,所以乐于分享的淘宝团队解决了这事。来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步”。

四、安装 Hexo

4.1 Hexo 的下载安装与配置

下载安装:

可以参考Hexo官网

打开终端键入以下命令:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ cnpm install hexo-cli -g

# 等待一会,安装完毕
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ hexo -v

# 查看 hexo 版本
# 若以上命令成功识别,那么 hexo 便安装成功

五、搭建静态网站

5.1 新建一个网站

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ hexo init [folder]

# 如果没有设置 folder,Hexo 默认在当前的文件夹建立网站

5.2 生成静态文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ hexo generate

# 该命令可以简写为 $ hexo g

5.3 启动服务器

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ hexo server

# 该命令可以简写为 $ hexo s
# 默认情况下,访问端口为:http://localhost:4000/
# 在浏览器中访问 http://localhost:4000/ 即可打开本地搭建好的网站

5.4 新建一篇文章

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ hexo new 

# 如果标题包含空格的话,请使用引号括起来 $ hexo new "first blog"
# 生成的 Markdown 文章放在 source 内的 _posts 下</code></pre><h1>六、利用 GitHub 部署网站</h1><h2>6.1 注册用户</h2><p><a href="https://github.com/">GitHub官网</a></p><p>点击右上角注册即可。</p><h2>6.2 创建同名仓库</h2><ul><li>点击右上的 <code>+</code>,选择 <code>New repository</code> 新建一个仓库</li><li>仓库名称设为 <code>用户名.github.io</code></li><li>仓库类型为 <code>Public</code> 公共类型</li><li>复制仓库 <code>HTTPS</code> URL</li></ul><h2>6.3 更改 Hexo 配置文件</h2><p>修改根目录 <code>_config.yml</code> 内的 <code>deploy</code></p><pre><code class="lang-yml"># Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: https://github.com/用户名/用户名.github.io.git    # HTTPS URL
  branch: master</code></pre><h2>6.4 安装 hexo - git 部署工具</h2><p>在 Hexo 博客根目录下,打开终端键入:</p><pre><code class="lang-bash">$ cnpm install hexo-deployer-git --save

# 安装 hexo-deployer-git 工具</code></pre><h2>6.5 远程部署到 GitHub Pages 服务器</h2><pre><code class="lang-bash">$ hexo deploy

# 该命令可以简写为 $ hexo d</code></pre><p>部署成功后即使用 <code>https://用户名.github.io/</code> 在浏览器中访问网站。</p><h1>七、结束语</h1><h2>7.1 美化 Hexo 网站</h2><p>Hexo 支持主题自定义,并且有一个活跃的 <a href="https://hexo.io/themes/">主题社区</a></p><p>切换主题方法:下载主题到 <code>themes</code> 文件夹内并修改根目录 <code>_config.yml</code> 内的 <code>theme</code> 设定,即可切换主题。</p><p>修改配置主题请查阅相应主题的文档。</p><p>目前比较热门的几个主题:</p><ul><li><a href="https://github.com/iissnan/hexo-theme-next">NexT GitHub</a></li><li><a href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly GitHub</a></li><li><a href="https://github.com/litten/hexo-theme-yilia">Yilia GitHub</a></li><li><a href="https://github.com/blinkfox/hexo-theme-matery">Matery GitHub</a></li></ul><h2>7.2 使用 Hexo 插件</h2><p>Hexo 是一个支持插件的可扩展框架,具体插件类型及安装方法请前往 <a href="https://hexo.io/plugins/">Hexo 官网查看</a> 或在搜索引擎求助。</p><h2>7.3 帮助文档</h2><p>Hexo 提供了全面的 Hexo <a href="https://hexo.io/docs/index.html">使用文档</a>(中英文版)及 <a href="https://hexo.io/api/">API 文档</a>,在使用及开发优化 Hexo 的过程中,建议以官方文档为基准。</p>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
最强大的 CSS 布局 —— Grid 布局
Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案,是目前唯一一种 CSS 二维布局。利用 Grid 布局,我们可以轻松实现类似下图布局,演示地址[1]
GopalFeng
2020/09/24
16.3K0
最强大的 CSS 布局 —— Grid 布局
Grid网格布局入门
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。
javascript.shop
2019/09/04
2.3K1
Grid网格布局入门
【CSS】最强大的布局之grid布局精讲
轮播图swiper框架的基本使用 【Transform3D】转换详解(看完就会) 【css动画】移动的小车
坚毅的小解同志的前端社区
2022/11/28
3.1K0
【CSS】最强大的布局之grid布局精讲
【图片版】CSS网格布局(Grid)完全教程
CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内联块等方式,从本质上都是Hack的方式,并且遗漏了一些重要的功能(比如:垂直居中)。Flexbox的出现部分解决了上述问题,但Flex布局是为了解决简单的一维布局,适用于页面局部布局。而Grid天然就是为了解决复杂的二维布局而出现的,适用页面的整体布局。在实际工作中,Grid和Flexbox不但不矛盾,而且还能很好的结合使用。做为WEB程序员,我们在页面布局问题上都付出过努力,也将不断探索新的方案。而Grid是第一个专门为布局问题而生的CSS模块,我们有理由对Grid充满期待。
毛瑞
2018/05/02
5.3K0
【图片版】CSS网格布局(Grid)完全教程
[译]二维布局:Grid Layout
CSS Grid Layout 是 CSS 中最强大的布局系统。不像 flexbox 那样的一维系统,它是一个二维系统,可以同时处理列和行。您可以通过将规则应用到父元素来使用 Grid Layout。
码农小余
2022/06/16
4.7K0
[译]二维布局:Grid Layout
CSS(七)
Grid 布局是 CSS 中最强大的布局系统。 Grid 布局是一个二维布局系统,意味着它可以处理列和行,不像 Flexbox 主要是一维布局系统。通过将 CSS 规则应用于父元素(称为 grid container)和子元素(称为 grid items),我们就可以使用网格布局。
1ess
2021/10/29
5430
CSS(七)
图解CSS布局(一)- Grid布局
Grid 布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局,也是唯一的二维布局方案,利用grid布局可以很轻松的实现很多的网页布局
小丞同学
2021/08/16
2.1K0
万字总结 CSS 布局
本文总结了主流的几种 CSS 的布局方法,无论你是一个想要学习 CSS 布局的新手,还是一个比较有经验但想要进一步巩固与了解最新CSS布局知识的前端开发者,这篇指南都能帮你全面了解如今CSS布局发展的现状。
用户8921923
2022/10/24
6.1K0
万字总结 CSS 布局
grid网格布局
​ 距今来看已经十多年了,确确实实占据了前端布局中很大的地位,相比大家对flex都很熟悉,所以今天我们的主角就是-------> Grid
Snine
2022/02/11
2.1K0
grid网格布局
Web前端学习 第2章 网页重构16 grid布局
grid容器的水平区域成为行(row),垂直区域成为列(column),行与列之间的较差与是单元格(cell),划分网格的线成为网格线(gird line),了解了这些基本概念之后,就可以开始用相应的css属性设置grid容器中的项目了。
学习猿地
2020/06/15
1K0
Web前端学习 第2章 网页重构16 grid布局
Grid布局详解:打造完美的网页布局
随着Web技术的不断发展,网页布局也在不断地改进和完善,其中Grid布局是最受欢迎的一种布局方式。它是一种基于网格线的布局方式,可以轻松地实现复杂的网页布局,而且还具有很强的可读性和可维护性。
Front_Yue
2023/12/22
1.7K0
Grid布局详解:打造完美的网页布局
CSS 中的 Grid 布局 完全指南
Grid 是一个基于二维网格布局的系统,有了它我们可以非常方便的实现过去很复杂布局,无需再使用float, inline-block, position 这些本质上是 hack 的方法。
羽月
2022/10/08
4.2K0
CSS 中的 Grid 布局 完全指南
10分钟理解CSS3 Grid
上一篇文章我们介绍了 css3 flexbox,今天我们再来说说css3的另外一个强大的功能:Grid。 Grid做前端的同学应该都很熟悉了,翻译成中文为“栅格”,用过bootstrap、semantic ui、ant design的同学肯定都了解grid layout(删格布局),以往css框架中的grid布局一般是通过float和百分比的宽度实现的,这种实现有几种缺点:
MudOnTire
2019/05/26
7910
CSS Flexbox与Grid:构建响应式布局的艺术
开启Flex布局模式。将一个元素设置为Flex容器,其直接子元素将成为Flex项目。
天涯学馆
2024/05/22
5370
CSS Flexbox与Grid:构建响应式布局的艺术
grid布局—让css变得更简单
通过将属性display的值设为grid,使 HTML 元素变为网格容器。在 CSS 网格中,父元素称为容器(container),它的子元素称为项(items)。
_kyle
2020/08/24
5.7K0
grid布局—让css变得更简单
grid 布局的使用
grid 布局的使用    css 网格布局,是一种二维布局系统。    浏览器支持情况:老旧浏览器不支持,    概念: 网格容器。元素应用dispalay:grid,它是所有网格项的父元素。       <div class="container">          <div class="item item-1"></div>         <div class="item item-2"></div>         <div class="item item-3"></div>       
用户1197315
2018/01/22
1.7K0
[CSS] 栅格化布局
栅格化布局帮助你更容易构建复杂的网页设计。它会将HTML元素转换为网格的容器(有行有列)。你可以在网格里面添加你想要的子元素。
Jimmy_is_jimmy
2020/10/29
1.3K0
CSS Grid 新手入门
另外,下面一段话摘自A Complete Guide to Grid,对于CSS Grid会有更加清楚地释义
糊糊糊糊糊了
2018/09/28
2.3K0
CSS Grid 新手入门
grid布局了解一下
首先,看一张图,了解一下容器和项目(不难理解,容器就是包在外层的元素,项目就是内部的元素)
用户4793865
2023/01/12
5200
grid布局了解一下
GRID布局
目前CSS布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性,都可以指定容器内部多个成员的位置。不同之处在于,Flex布局是轴线布局,只能指定成员针对轴线的位置,可以看作是一维布局。Grid布局则是将容器划分成行和列,产生单元格,然后指定成员所在的单元格,可以看作是二维布局。
WindRunnerMax
2020/08/27
1.5K0
相关推荐
最强大的 CSS 布局 —— Grid 布局
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验