hexo 搭建静态博客

最新推荐文章于 2022-10-30 08:12:14 发布
最新推荐文章于 2022-10-30 08:12:14 发布
阅读量569 收藏 2
点赞数
分类专栏： 服务搭建
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41793394/article/details/106688784
版权

hexo 搭建静态博客

写在前面

本博客呢就是使用 hexo 搭建的 静态博客，部署在 github 站点，hexo官网是 https://hexo.io/zh-cn/，使用了zhaoo这款主题，这款主题的开源地址是 https://github.com/izhaoo/hexo-theme-zhaoo 。

原理

使用 markdown语法编写一篇文章，hexo将 markdown 文件渲染成 html 页面和资源文件，把这些文件上传到 github 仓库，开启 github pages 服务就可以访问了，所以，其本质就是渲染出静态页面。

环境准备

在 D 盘新建 hexo 文件夹来安装hexo服务 ----->

1

在安装hexo服务之前确保有 node 和 npm 环境。

node 和 npm

如果没有 node 和 npm 可以参考：https://www.runoob.com/nodejs/nodejs-install-setup.html

安装 Hexo 服务

打开CMD 进入 D 盘的 hexo 目录，输入命令： npm install hexo-cli -g

安装hexo

接下来输入命令：hexo init blog 进行初始化。

初始化hexo

初始化完成后可以看到：

初始化完成

CMD 进入 D:\hexo\blog 目录输入 npm install 安装项目依赖。

安装依赖

继续输入 hexo server 命令即可启动服务，也可以简写成 hexo s

启动服务

打开浏览器访问 localhost:4000 可以看到：

访问服务

我们可以看到，这个默认的主题不太好看呀，于是我们准备换一个漂亮的主题：

CMD 进入 D:\hexo\blog\themes 目录，输入如下命令下载主题：git clone https://github.com/izhaoo/hexo-theme-zhaoo.git zhaoo 输入这个命令前请确保有 Git 环境（相信你明白我说的啥吧），如果实在没有 Git 环境，可以在 Github 网站上下载后解压到 D:\hexo\blog\themes 目录，若果 Github 下载太慢的话可以使用 http://g.widyun.com/ 此网站下载。

安装 zhaoo 主题

进入 D:\hexo\blog 目录打开并编辑 _config.yml 文件，加入以下配置启用 zhaoo 主题

配置zhaoo主题

然后再对 D:\hexo\blog 的 _config.yml 文件和 D:\hexo\blog\themes\zhaoo 目录下 _config.yml进行定制化配置：

D:\hexo\blog_config.yml:

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 一只小安仔
subtitle: 
description: 
keywords:
author: junan
language: 
timezone: 

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://junanchen.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true


# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 9
  order_by: -date

highlight:
  enable: true
  line_number: true
  auto_detect: true
  hljs: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: zhaoo

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
#  repo: https://gitee.com/junanaa/blog.git
  repo: https://github.com/JunanChen/junanchen.github.io.git
  branch: master

D:\hexo\blog\themes\zhaoo_config.yml :

# --------------------------------------------------
# Site settings
# --------------------------------------------------
  
# Color
color:
  default: "#33333D"
  link: "#FFBE5B"

# Favicon
favicon:
  small: /images/icons/favicon-16x16.png
  medium: /images/icons/favicon-32x32.png
  apple_touch_icon: /images/icons/apple-touch-icon.png
  safari_pinned_tab: /images/icons/stun-logo.svg
  msapplication: /images/icons/favicon-144x144.png

# Keywords
keywords: 一只小安仔

# Preview
preview:
  enable: true
  model: wave  #cloud
  welcome_image: /images/theme/background.jpg
  motto:
    default: 夜半花落听雨声，不自欢喜不自愁。
    api:  #'http://localhost:3000/api/motto'

# Menu
menu:
  home: / || 首页
#  galleries: /galleries || 摄影
  archives: /archives || 归档
  tags: /tags || 标签
  categories: /categories || 分类
  about: /about || 关于

# Copyright
copyright: <p>Copyright© 2019-2020 | <a target="_blank" href="http://junanaa.gitee.io/">一只小安仔</a> .AllRightsReserved</p>

# Social
social:
  qq: tencent://message/?Menu=yes&uin=1286890175 || iconQQ || '#12B7F5'
  wechat: javascript:; || iconwechat-fill || '#09BB07'
#  instagram: https://www.instagram.com/izhaoo/ || iconinstagram || '#DA2E76'
 # github: https://github.com/izhaoo || icongithub-fill || '#24292E'
  email: mailto:chenjunan_2018@163.com || iconmail

# Fab (FloatActionButton)
fab:
  enable: true
  alwaysShow: false

# --------------------------------------------------
# Post settings
# --------------------------------------------------

# Post image
post_image: /images/theme/post-image.jpg

# Donate
donate:
  alipay: 
  wechat: 

# --------------------------------------------------
# Page settings
# --------------------------------------------------

# Galleries
galleries:
  enable: true
  title: 摄影
  subtitle: Photography

# --------------------------------------------------
# Comment settings
# --------------------------------------------------

comments:
  enable: true
  type: valine
  button: true

# Gitalk
gitalk:
  owner:
  repo:
  admin:
  clientID:
  clientSecret:

# Valine
valine:
  appId: a8aBoMUoOnc1VQB8luHmCH4Y-gzGzoHsz
  appKey: EEUcoQEF0g8aC9y8tqj1koxE
  placeholder: 大爷来玩呀~
  avatar: mp
  pageSize: 10
  lang: zh-CN

# ChangYan
changyan:
  appId:
  appKey:

# --------------------------------------------------
# Plugin settings
# --------------------------------------------------

# Lazyload
lazyload:
  enable: true
  onlyPost: false
  loadingImage: /images/theme/loading.gif

# LeanCloud
leancloud:
  enable: false
  appId:
  appKey:
  serverURLs:

# FancyBox
fancybox: true

# Pjax
pjax: false

# HighLight
highlight: true

# --------------------------------------------------
# Script settings
# --------------------------------------------------

# CDN
vendors:
  jquery_js: https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
  fancybox_js: https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js
  pjax_js: https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js
  lazyload_js: https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js
  justifiedGallery_js: https://cdn.bootcdn.net/ajax/libs/justifiedGallery/3.7.0/js/jquery.justifiedGallery.min.js
  fancybox_css: https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css
  highlight_css: https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css
  iconfont_css: //at.alicdn.com/t/font_1445822_58xq2j9v1id.css
  justifiedGallery_css: https://cdn.bootcdn.net/ajax/libs/justifiedGallery/3.7.0/css/justifiedGallery.min.css

# SEO
seo:
  baidu_auto_push: true

# Analytics
analytics:
  baidu: #id
  google: #id
  tencent: #id
  cnzz: #id

# Custom
custom:
  head:
  foot:
  css:
  js:

可以在 D:\hexo\blog 目录下重启 hexo s 启动。

博客首页
博客首页

上传 Github 静态博客

想放在 Github 上供其他人访问，就需要上传 Github ，如果考虑 Github 访问太慢，想上传 Gitee 也是可以的，但上传 Gitee 好像会有些坑，可以自己去尝试。

新建仓库

新建仓库
新建仓库

修改配置文件

修改 D:\hexo\blog 下的 _config.yml 文件，确保 repo 配置为你自己仓库的地址。

修改配置

CMD 打开 D:\hexo\blog 输入以下命令：hexo g（即hexo generat） 编译生成静态文件

编译生成静态文件

最后输入 hexo d （即 hexo deploy） 命令上传到仓库：（这个过程需要Git环境哦，你知道我在说啥吧）

期间可能会让你输入 Github 的账号和密码哟！

输入账号密码

进入仓库可以看到文件以及上传：

在这里插入图片描述

开启 Github pages 服务

点击 Setting
进入setting
往下翻找到 Github Pages ，开启服务即可。

开启服务

访问这个网址即可看到自己的博客：

访问博客

其他插件

我这里用到了 Valine 评论插件 ，具体配置可参考： https://blog.csdn.net/blue_zy/article/details/79071414

一只小安仔
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
github page hexo博客gitee_（一）Github + Hexo 搭建个人博客超详细教程
weixin_39534321的博客
11-23 710
本文首次发布于我的博客：Tyzhao Blog​muyiio.com本文在CSDN的链接：Github + Hexo 搭建个人博客超详细教程博客效果可以先预览我的博客，进入博客观看效果更佳！在搭建过程中遇到问题戳我就可以，在我的博客有联系方式，私信也可以。前言作为一名计算机爱好者，摸索了一周搭建出自己的博客。目前只学习了c语言，没有任何前端知识和网站开发经验，总的来说，算不上很难，但也要费些心思。...
教你 3 分钟用 Hexo 建立一个纯静态、高性能的个人博客
Becomin' Charles
02-26 195
本文教你 3 分钟用 Hexo 一款静态网站生成器，建立一个个人博客。
【阿里云开发】一键部署静态博客——Hexo
宝耶需努力的技术分享博客
12-16 1012
文章目录???? 实验简介???? 实验部署——搭建Hexo????一、创建模板应用✅ 1、应用中心模版创建应用✅ 2、绑定GitHub账号✅ 3、授权使用✅ 4、完成绑定✅ 5、填写相关信息完成创建???? 二、在日常环境部署站点⛳ 1、一键应用部署⛳ 2、点击“立即部署”⛳ 3、完成部署⛳ 4、访问Dinosaurs网站???? 三、配置自定义域名在线上环境上线???? 1、配置线上环境自定义域名???? 2、配置CNAME地址✨（1）进入域名解析列表✨（2）添加域名✨（3）添加记录✨（4）点击“
用Hexo制作自己的静态博客
weixin_33753003的博客
11-14 343
博客是一个老东西了，如果我们想写博客的话，有两种选择，第一种是在博客网站上，例如QQ空间、新浪博客、简书等网站上申请账号，然后编写博客；第二种就是自己找服务器搭一个博客。搭建博客也有两种选择，第一种是搭建动态博客，这方面最流行的就是WordPress，第二种就是搭建静态博客，这方面有很多选择。说到功能上，动态...
Hexo静态博客搭建+个人定制
热门推荐
计算机幻觉：）
05-24 3万+
写在前面 　　很早以前就想写这样一篇了，因为各种原因耽搁到现在（逃）…网上关于Hexo的教程其实已经有挺多了，但是很多都是一笔带过。这篇博客除了Hexo博客的搭建过程，还有一些我加进去的个人定制模块，以及博客如何被搜索引擎（百度、谷歌）收录、如何进行SEO优化等等，以及在这过程中遇到的数不胜数的坑。虽然时隔一个月，有些搭建过程遇到的问题记不太清了orz…但是有什么问题还是可以问我的，我尽量解答=...
基于Hexo搭建的博客系统源码.zip
11-02
Hexo是一款快速、简洁且高效的静态博客框架，它使用Markdown语法编写内容，通过简单的配置即可生成静态网页。基于Hexo搭建的博客系统源码.zip文件包含了一整套用于创建个人博客的源代码，使得用户可以自定义自己的...
mac OS基于hexo 搭建个人静态博客（免费）
01-06
静态博客就是用户访问的页面都是相同的，而动态博客是可以登录的，每个用户看到的页面也有差别。 hexo需要Node.js支持的，所以我们首先需要安装Node.js。 https://nodejs.org/en/ 下载下来后直接全部下一步安装。 ...
个人博客系统-前后端,基于hexo搭建
10-19
Hexo，一款轻量级的静态博客框架，以其简洁、高效和易于上手的特点，受到了众多用户的喜爱。它基于Node.js，能够快速生成静态网页，同时提供了丰富的主题和插件支持，使用户可以轻松定制出符合自己风格的博客界面。 ...
用Hexo搭建个人博客共7页.pdf.zip
10-31
【标题】: "用Hexo搭建个人博客共7页.pdf" 这个标题暗示了文档内容是关于使用Hexo框架创建个人博客的详细指南。Hexo是一个快速、简洁且高效的静态站点生成器，尤其适合用来构建个人博客。它基于Node.js，通过简单的...
My-Blog:基于Hexo搭建的静态博客
05-07
在本例中，“My-Blog”就是这样一个基于Hexo搭建的个人博客。博客地址未在描述中给出，但通常这样的博客会被部署到GitHub Pages上，因为GitHub提供免费的静态网页托管服务。用户只需将`public`目录下的内容推送到...
自己动手搭建聊天APP
qq_41793394的博客
04-29 1万+
自己动手实现聊天APP 成果 开始 时隔两年多，想再次看看 app 的开发。还记得两年前辛苦使用 andro studio 写 xml 的日子，五味杂陈。网上走了一圈，发现 dcloud 公司推出了 uni-app 和 5 + app 的方式开发 app ， 为了知道这些方式和 andro studio 开发 app 的区别。我开始了探寻。 uni-app 和 5 + app uni-ap...
hexo博客设置唯一链接
安安的博客
10-30 350
复制后的URL路径就是把中文变成了一大堆字符串编码，如果你在其他地方用这边文章的url链接，偶然你又修改了改文章的标题，那这个URL链接就会失效。为了给每一篇文章来上一个属于自己的链接，写下此教程，利用 hexo-abbrlink 插件，A Hexo plugin to generate static post link based on post titles ,来解决这个问题。Hexo的默认文章链接格式是年，月，日，标题这种格式来生成的。如果你的标题是中文的话，那你的URL链接就会包含中文，
用hexo搭建个人静态博客
倚马古道
05-12 573
用hexo搭建个人静态博客 原文用hexo搭建个人静态博客 还在自己上本科的时候就用wordprss搭建过自己的个人博客，当时由于自己才开始接触web，并没有找到合适自己的模板，总是对自己的博客不感兴趣。时过境迁，前一段时间自己又在外面租了一个VPS来科学上网，发现太浪费了，就准备搭建一个自己的博客。通过寻找，发现hexo框架非常不错，就开始了自己的博客搭建之路。 hexo 介绍 he...
Hexo搭建静态博客
老胡
09-23 1688
前言前段时间因为我的WordPress博客进入后台非常慢，严重影响操作使用，再加上服务器时间的限制，所以就讲博客从WordPress迁移到了Hexo上，这篇文章记录下我创建Hexo博客的一些流程步骤。HexoHexo是一个简单地、轻量地、基于NodeJS的一个静态博客框架，可以方便的生成静态网页托管在github或者是国内的coding.net上Github PagesGitHub Pages 可以
Hexo搭建静态博客的使用以及更换主题
CDL_LuFei的博客
03-01 332
前言 前边介绍使用Github+Hexo搭建了一个免费的个人静态博客，文中记录我自己在搭建中的详细过程以及遇到的各种问题。接下来我将利用搭建好的静态网页来编写第一篇博客，以及后边更换博客的主题。 发布文章 进入到博客所在目录(Blog) 1.鼠标右键使用Git Bash Here打开bash命令窗口，使用Hexo命令操作 hexo new "文章名称" 将在source文件夹中出现新建的Markdown格式的文档，使用Markdown编辑器在该文档中编写内容，这里我用的编辑器是Typora，同
使用hexo搭建本地静态博客(一)
K_0101的博客
11-22 225
使用hexo搭建本地静态博客(一) 环境要求 已安装Git √ 已安装Node.js √ 已安装淘宝镜像cnpm √ 考虑到外网下载速度慢的原因，这里我会提供相应的环境安装包。 百度网盘 提取码：bcvc 地址：https://pan.baidu.com/s/1nvDJlnWm3UsG-_ghrryGtQ 关于操作系统 我这里是使用的《Windows 10 专业版》来进行操作的。如果你使用的操作系统和我的不一致也请不要担心，因为无论哪个操作系统，它们的操作(命令行操作)几乎都是没有差别的。 操作系统：Wi
[Hexo]Hexo+github搭建静态博客
SmartSi
05-19 1万+
1.简介 Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章（经常玩CSDN上的人都知道），在几秒内，即可利用靓丽的主题生成静态网页。通过Hexo我们可以快速创建自己的博客，仅需要几条命令就可以完成。发布时，Hexo可以部署在自己的Node服务器上面，也可以部署github上面。对于个人用户来说，部署在github上好处颇多，不仅可以省去服
Hexo 生成永久文章链接
后端小哥
04-22 1772
Hexo 默认文章链接生成规则是按照年、月、日、标题来生成的。一旦文章标题或者发布时间被修改，URL 就会发生变化，之前文章地址也会变成 404，而且 URL 层级很深，不利于分享和搜索引擎收录。 如果文章标题中有中文，URL 被转码后会很长，比如：https://lujiahao0708.github.io/2020/04/11/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9...
静态个人博客 -- 框架Hexo + 链接GitHub
兜兜的博客
04-05 214
原来静态博客并不需要服务器的呀~
hexo搭建个人博客mac
最新发布
03-31
Hexo是一个基于Node.js的静态博客框架，可以帮助你快速搭建个人博客。在Mac上搭建Hexo个人博客的步骤如下： 1. 安装Node.js：首先确保你的Mac上已经安装了Node.js，可以在终端中输入`node -v`来检查是否已经安装。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值