Hexo+GitHub搭建个人博客网站

news/2024/5/16 4:53:44/文章来源:https://blog.csdn.net/weixin_34249678/article/details/89665221

前言

今天,带大家利用Hexo和GitHub搭建属于自己的个人博客。

img_6b0e1c4a55cd93ec8ea6ea71bbb85753.jpe
配一张图

Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页

img_16f6764ae6a5f4e2c8e190655a23cdb7.png
HEXO

传送门:Hexo官网中文文档

环境配置

1. 安装&配置git

  1. 访问git官网,下载git。

  2. 双击exe文件安装,一路next即可。

  3. 安装好git之后,配置用户名和邮箱。打开git-bash:

# 配置全局用户名
git config --global user.name "yourname"
# 配置全局邮箱
git config --global user.email "youremail@qq.com"

用户名和邮箱同你的GitHub(如果没有,去GitHub官网注册一个,注册好后记得邮箱验证才能使用。)

  1. 配置ssh。打开git-bash:
#输入,回车
ssh-keygen
img_51706b262784dfeabb79e089b27d0f34.png
git-bash

复制(右键+复制,不能ctrl+c,这里ctrl+c是结束命令的意思)图中的/c/Users/Administrator/.ssh/id_rsa,然后把它粘贴(右键+粘贴)到冒号后面,然后回车,回车,回车。。。直到结束(中间的冒号,除了第一个不用管只管回车)。

  1. github上生成ssh key,是本地Git绑定GitHub。
    网页上打开github -> 点击头像 -> Settings -> 左边菜单找到 SSH and GPG keys -> New SSH key(绿色按钮)-> title随便填(用英文)-> key值(打开/c/Users/Administrator/.ssh/id_rsa所在的文件夹,找到id_rsa.pub,注意是pub后缀那个文件,用记事本打开,复制里面的内容,粘贴到key值。) -> 点击下面的Add SSH key -> 完成。
img_43f69df0c6f6ab358f6c24c1bb932621.png
添加ssh key

2. 下载安装Node.js

  1. node.js下载地址
img_1639e58873528836bc00f6eebbc86c37.png
Node.js
  1. 安装步骤:一路默认就行(安装路径根据自己需要更改)

安装&使用Hexo

  1. 在D盘下(其他地方也可以)创建一个空文件夹(命名为你主页的名字或者HEXO,随便啦,这里以名为MyBlog为例)

  2. 打开cmd命令窗口(桌面任务栏最左边那个wins图标-> 搜索 -> 输入cmd ,回车)。切换到D盘:(输入,回车)D: -> 切换到刚才建的空文件夹:(输入,回车)cd MyBlog

  3. 安装Hexo

# 切换国内源
npm config set registry="http://registry.cnpmjs.org"
# 安装hexo
npm install -g hexo

等待安装完成。

  1. 初始化Hexo:
# 初始化Hexo
hexo init
# 安装必要模块
npm install

这时,MyBlog文件夹下就生成了一些文件。文件目录如下:

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

到此博客已经配置好了(虽然是默认的样子)

  1. 测试一下:
# 生成静态文件
hexo g // 或 hexo generate
# 本地测试
hexo s // 或 hexo server

然后浏览器上查看 http://localhost:4000

是不是可以看到一个简单的网页(如果不能,有可能是4000端口被别的程序占用了,自行百度解决方案)。

个性化

1. _config.yml文件

打开该目录下的_config.yml文件。(用什么软件打开?你可以用editplus或者vs 等,也可以直接用记事本,就是比较难看,建议下个editplus吧。)

修改成你想要的内容。

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/# Site
title: 换成你的主页标题
subtitle: 主页副标题
description: 主页介绍的一句话
author: 你的名字
language: zh-CN #语言
timezone: Asia/Shanghai #时区# URL
## If your site is put in a subdirectory, 
##set url as 'http://yoursite.com/child' and root as '/child/'
url: http://voidking.com
root: /
permalink: :year/:month/:day/:title/permalink_defaults:# 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: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:enable: trueline_number: trueauto_detect: truetab_replace:# Category & Tag
default_category: uncategorized
category_map:
tag_map:# 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# Pagination
## Set per_page to 0 to disable pagination
per_page: 5
pagination_dir: pageindex_generator:per_page: 5archive_generator:per_page: 500yearly: true  monthly: true tag_generator:per_page: 100 category_generator: per_page: 100 # Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: 你用的主题文件夹名字 # themes下的文件# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:type: gitrepository: GitHub仓库地址branch: master

2. 修改主题

在hexo官网主题中找一个喜欢的主题。

找到后,一般都有介绍怎么使用该主题的文章,如果没有,把网页拉到最下面。看到:2018 | Powered by Hexo Theme by Aath
点击Theme by 后面的连接,一般会简介到本主题在GitHub上的仓库地址。

根据说明,下载配置主题。

  1. 下载主题。比如:
# 切换到MyBlog文件下,cmd执行
git clone -b master https://github.com/lewis-geek/hexo-theme-Aath.git themes/aath

一般,它会自动下载到themes文件夹下。

  1. 跟换博客的主题:
    下载好后,你在_config.yml(主题是MyBlog文件夹下的)中的theme:处配置成你下在的主题名字(就是下载的主题文件夹名字 )

  2. 配置主题:
    根据GitHub上的说明配置themes/主题名目录下的_config.yml(不要与MyBlog的_config.yml搞混)。不同主题,配置起来不一样,所以在此不详解了。

发布到GitHub

  1. Github上新建仓库:
    打开GitHub网页,点击头像旁边的“+”号 -> New repository -> 填写名字(必须是:你GitHub的名字.github.io
img_37c7d604202e8cb2c61ef7185cdcc1a9.png
如图
  1. 本地配置Git:
    在MyBlog文件夹下的_config.yml配置(大约在底部位置):
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:type: gitrepository: https://github.com/wzmyyj/wzmyyj.github.io.gitbranch: master
  1. 上传:
# 如果想把原来的清除
hexo clean
# 重新生成静态文件
hexo g
# 上传到提交文件
hexo d

第一次提交需要GitHub登录账号和密码。

上传完成后,浏览器打开:https://你的GitHub名字.github.io 就是你的博客主页地址了。(GitHub响应比较慢,刚上传需要等一小会才能打开最新的。)

写文章

  1. 新建一篇文章:
# 新建
hexo new post 文章名

Myblog\source\_posts目录下你将看到一个新建的文章名.md文件。

  1. 编辑文章:
    用editplus打开编辑,用Markdown格式书写。

保存时,记得把编码方式改成utf-8。Document -> File Encoding -> Convert Encoding...

建议用简书写(简书设置里把编辑器改成Markdown),然后复制过去。好处是图片存在简书上,访问起来快些。

  1. 上传:(和前面一样)
# 如果想把原来的清除
hexo clean
# 重新生成静态文件
hexo g
# 本地测试
hexo s
# 上传到提交文件
hexo d

到此,你的博客主页已经完成。


跟换域名

  1. 购买一个域名。(阿里云,腾讯云,万网均可注册购买域名)

  2. 修改你域名的DNS地址为 dns22.hichina.com, dns21.hichina.com

  3. 域名解析上,CNAME到你的GitHub名字.github.io

    img_241098dc6f302e785637a996b54ebf29.png
    域名解析

  4. 然后在你的本地站点目录里的source目录下添加一个CNAME文件。以文本编辑器打开CNAME,里面添加你的域名(不加http://)。

  5. 在MyBlog文件夹下的_config.yml配置url:

# URL
## If your site is put in a subdirectory, 
## set url as 'http://yoursite.com/child' and root as '/child/'
url: http://wzmyyj.top   //你的域名
  1. 重新生成静态文件和上传到GitHub。

附件

1. 参考文献:

Hexo环境搭建2018年5月版
搭建个人博客-hexo+github详细完整步骤
我的博客是如何搭建的(github pages + HEXO + 域名绑定)
Hexo中文文档

2. 我的主页:

欢迎大家浏览我的主页:http://wzmyyj.top/

img_8f3bd957fe19978ebbc51f1063aec2f8.png
wzmyyj的主页

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_723797.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台、后台、后端接口和服务器配置。本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue、vue-router、vuex、vue SSR)开发的一套博客前台页…

CDN网站加速原理

2019独角兽企业重金招聘Python工程师标准>>> CDN加速将网站的内容缓存在网络边缘(离用户接入网络最近的地方),然后在用户访问网站内容的时候,通过调度系统将用户的请求路由或者引导到离用户接入网络最近或者访问效果的…

Linux 服务器建站新手教程(宝塔建站全流程)-不需要敲一行命令

Linux 服务器配置、运行、不用敲命令WordPress 建站攻略 本文提供全图文流程,中文翻译。 Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) Chinar —— 心分…

高大上网站-CSS3总结1-图片2D处理以及BUG修复

高大上网站-CSS3总结1-图片2D处理以及BUG修复 一,前言: 现在的前端UI相对JS来说,重视并不够。 但是CSS3提供的新特性,将现在的网站赤裸裸的划分为两类:一类还在写着老旧样式,或者通过bootstrap来蹭点CSS3动…

Apache实现一台服务器上运行多个网站

总共有三种方法:通过不同的IP地址 通过不同的域名 通过不同的端口号 (1).通过不同的IP地址实现 例如一台CentOS7有两个IP:192.168.5.101和192.168.5.103 [rootyouxi1 conf]# cd /etc/httpd/conf.d/ [rootyouxi1 conf.d]# vim test.conf  //新建一个配置…

大型网站技术架构(五)网站高可用架构

2019独角兽企业重金招聘Python工程师标准>>> 网站的可用性(Avaliability)描述网站可有效访问的特性。 1、网站可用性的度量与考核 网站不可用时间(故障时间)故障修复时间点-故障发现(报告)时间点…

网站HTTP升级HTTPS完全配置手册

本文由葡萄城技术团队于51CTO原创并首发转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。今天,所有使用Google Chrome稳定版的用户迎来了v68正式版首个版本的发布,详细版本号…

SEO实战密码:60天网站流量提高20倍(第2版)

SEO实战密码:60天网站流量提高20倍(第2版)(Zac告诉你他所知道的关于SEO的一切) 编辑推荐 畅销书升级版!  《SEO实战密码——60天网站流量提高20倍(第2版)》第1版荣获2011年度电子工业出版社最畅销图书奖。   Zac告诉你他所知道的关于SEO的…

您要访问的网站包含欺诈信息

版权声明:本文为 testcs_dn(微wx笑) 原创文章,非商用自由转载-保持署名-注明出处,谢谢。 https://blog.csdn.net/testcs_dn/article/details/80863960 不管是什么网站,安全你自己都有责任,没有绝对的安全。

Scrapy使用随机User-Agent爬取网站

小哈.jpg在爬虫爬取过程中,我们常常会使用各种各样的伪装来降低被目标网站反爬的概率,其中随机更换User-Agent就是一种手段。 在scrapy中,其实已经内置了User-Agent中间件, class UserAgentMiddleware(object):"""…

【JAVA系列】使用JavaScript实现网站访问次数统计代码

公众号:SAP Technical本文作者:matinal原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:【JAVA系列】使用JavaScript实现网站访问次数统计代码前言部分 大家可以关注我的公众号,公众号里的排版更好,…

夺命雷公狗—玩转SEO---33---DEDE网站安全

很多人都说dede不安全好多黑阔会黑掉她,但是说句实话,小弟10几年前就开始玩黑阔了,就连黑阔站长也是10年前就开始做了而且还是做过三个黑阔站点会员人数巅峰时期3万,同时在线超5000,时间流逝,我就不想多说以…

夺命雷公狗—玩转SEO---34---DEDE浅入百度搜索资源平台抓取和网站地图提交

百度搜索资源平台的地址是:https://ziyuan.baidu.com ,注册号会员账户后即可进入平台~~! 登录后,我们需要对网站进行验证,验证过后,我们来到抓取诊断: 抓取成功了,说明我们的网站可…

夺命雷公狗—玩转SEO---35---DEDE快排之LOGO和友情链接的玩法

LOGO是每个网站都必须要有的,所以我们需要用到一个技术,那么就是关键词与图片分离操作,从而提升排名~~! 我们首先需要做的就是找到logo 的标签,然后给 logo 的 a 标签外加上一个 div 。 原本我们的是这样的&am…

夺命雷公狗—玩转SEO---36---只需3步实现判断关键词难易度

我们在做排名的前期必须要先进行判断我们的词难度是否大~ ~! 第一我们打开百度指数 index.baidu.com: 对于一个企业站或者一个地区或者全国词来说200-300左右都是好平均的(难易度正常)200以下的偏简单的,我们的茂名旅…

夺命雷公狗—玩转SEO---37---查询网站收录且进行提升

我们经常需要查询我们的网站收录的情况,查询方法其实也很简单,通过 site: 即可进行查询,如下所示: 这些事目前已经被百度收录的情况,然后我们使用 尖叫青蛙 来进行查询,如下所示: 我们在左…

夺命雷公狗—玩转SEO---38---百度快照投诉从而更新快照

我们网页排名的是一个快照,使用我们网站上如果发生修改之后,我们需要及时通知搜索引擎爬虫过来索引新内容的快速操作~~! 正常来说蜘蛛他会在1周爬行一次,所以我们需要及时通知搜索引擎~ 操作方法其实也很简单,有两种方…

夺命雷公狗—玩转SEO---39---nofollow玩法的奥秘

nofollow其实是放在A标签里面的一个属性~~&#xff01; <a rel“nofollow”></a> nofollow 其实有一个较大的优势是在于防止权重的流失~~&#xff01; 列子&#xff1a; 比如我们自家的网站地址是www.usbdy.com &#xff0c;我们的的A标签中的地址是www.baidu.co…

夺命雷公狗—玩转SEO---40---提升网站出图率的技巧

出图&#xff0c;他分为两种&#xff0c;首页和内容页出图~~&#xff01; 首页我们最常见的就是LOGO图片了&#xff0c;我们的LOGO如果可以&#xff0c;尽量按照百度的要求上的规则来玩&#xff1a; 我们可以进入百度站长平台进行查询一下规则来玩&#xff0c;PC站点的LOGO比率…

夺命雷公狗—玩转SEO---41---H1标签的玩法

网站中除了 tiitle 标签后就到H标签了&#xff0c;这是一个比较重要的标签&#xff0c;因为蜘蛛会按照等级进行划分网站内容的重要性的&#xff0c;如先是 titile &#xff0c;然后就到H标签了。 H标签分为H1-H6&#xff0c;但是我们最多用到H3即可~~&#xff01; H标签…