Hexo+Github个人网站搭建

简介: 有输入必定有输出,输入效率越高,涉猎范围越广,产出内容越优质。优质的内容 + 优质的输出平台 = 好的个人名片。今天这篇文章就给各位介绍下如何利用Hexo+Github搭建属于自己的博客平台,从而让其成为自己的一张名片。


前言


有输入必定有输出,输入效率越高,涉猎范围越广,产出内容越优质。优质的内容 + 优质的输出平台 = 好的个人名片。


今天这篇文章就给各位介绍下如何利用Hexo+Github搭建属于自己的博客平台,从而让其成为自己的一张名片。


1 简单介绍下~



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


为什么选择Hexo呢?


  • 因为hexo非常小巧,使用nodejs开发,下载安装时只需要几个简答的npm命令即可。
  • 纯静态博客,不需要什么额外的mysql数据库、php环境…仅仅需要一个nodejs环境即可。
  • 由于是静态博客,所以,可以非常方便部署到github、gitcafe上(后者是国内的,速度可能更有保证)
  • 支持markdown语法、兼容windows linux mac,高可扩展性和自定义,而且有非常多的hexo主题…


2 搭建过程详解



1.安装Node


地址:https://nodejs.org/en/


2.安装Git


地址:https://git-scm.com/ 


安装之后,通过如下命令:  


git --version


node -V

检查安装是否成功,若通过cmd命令行可正常查看git或node的版本,则意味着安装成功!


3.以上两个安装成功后,借用node的包管理工具npm安装hexo-cli


npm install -g hexo-cli


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


hexo init yangzhuo


cd yangzhuo


npm install


5.Hexo 3.0 把服务器独立成了个别模块,您必须先安装 hexo-server 才能使用。


npm install hexo-server –save

6.安装完成后,输入以下命令以启动服务器,您的网站会在如下地址:

http://localhost:4000

下启动。在服务器启动期间,Hexo 会监视文件变动并自动更新,您无须重启服务器。


hexo server

现在小伙伴就可在本地访问你的网站了,来看看吧~


微信图片_20220610205745.jpg



但是大家都知道,小ha是一个能力不高,眼光很高的人,本地查看怎么能满足他的要求,我们来为上线做做准备~


7.注册github账号并建立仓库


微信图片_20220610205757.png

微信图片_20220610205803.png

微信图片_20220610205809.png



保存提交之后,查看仓库内容,会发现有一个index.html的文件,然后通过如下地址访问页面,效果如下图所示:


地址:https://yzzhuozhuo.github.io/



微信图片_20220610205815.png


8.通过ssh关联此仓库并发布上线


  • 生成ssh密钥


ssh-keygen -t rsa -c "1306846969@qq.com"


  • 将公钥复制到github(:windows平台下密钥一般存储在c盘


微信图片_20220610205821.png

微信图片_20220610205825.png



  • 配置用户名和密码

git config –global user.name "yangzhuo"


git config –global user.email "1306846969@qq.com"


  • 测试github仓库是否连接成功


ssh -T git@github.co



微信图片_20220610205831.png



若测试结果如上所示,则代表连接成功~,喝瓶RIO庆祝一下吧~o(* ̄▽ ̄*)ブ


  • 安装部署工具


npm install –save hexo-deployer-git


  • 修改配置文件

    打开你建立的文件夹,如图所示,记事本方式打开_config.yml文件


微信图片_20220610205835.png



修改如下:


微信图片_20220610205840.png



  • 线上部署

hexo g -d


查看github仓库内容,若出现如下情况,则恭喜你,距离成功仅差一丢丢了哟~


微信图片_20220610205844.png

微信图片_20220610205849.jpg



3 主题配置



主题地址:


https://hexo.io/themes/#%E4%B8%AD%E6%96%87


小伙伴们可以根据自己或者女朋友的喜好挑选一个高端大气的主题~这里我就不赘述了,免得引起你们女朋友吃醋~



展示一下搭建好的效果图:


微信图片_20220610205857.jpg



Github+Hexo搭出来的网站,访问速度比较慢,推荐大家去阿里云或者腾讯云等云服务提供商买个服务器,再买个域名,自己搭建一个博客或者网站。



4 网站日常内容更新



网站内容的更新一般由网站运营者通过编辑md文件,然后校对并在本地进行测试,确认无误之后,将其发布上线,下面将介绍如何发布一篇文章:


按照下图中路径地址打开文件夹,每次将写好的md文件保存至此


微信图片_20220610205902.jpg



此页面内打开git终端通过如下命令本地(localhost:4000)查看:


hexo s


如果本地查看无误,然后通过如下命令上线发布:


hexo d

最后,小伙伴们可通过如下地址访问博客了:

地址:https://yzzhuozhuo.github.io/

相关文章
|
4月前
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
|
5月前
|
缓存 JavaScript 网络安全
基于Hexo的主题Fluid搭建Github博客
基于Hexo的主题Fluid搭建Github博客
74 1
|
4月前
Hexo博客添加GitHub评论功能
Hexo博客添加GitHub评论功能
50 0
|
9月前
|
数据采集 JavaScript 程序员
用 GitHub + Hexo 建立你的第一个博客
其中,第一种最简单,也最受限,说不定还会被删帖删号。第二种稍复杂,另外需要自己找部署的服务器,但可定制化较高,是很多程序员的选择。最后一种,是在重复造轮子,不过从另一个方面来看,倒是锻炼编程能力的好方式。
|
8月前
|
JavaScript 网络安全 开发工具
Github+Hexo搭建个人网站详细教程
随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷。然后,如果你是一个不甘寂寞的程序猿,是否也想要搭建一个属于自己的个人网站,如果你曾经或者现在正有这样的想法,请跟随这篇文章发挥你的Geek精神,让你快速拥有自己的博客网站,写文章记录生活,享受这种从0到1的过程。
|
9月前
|
JavaScript
Hexo+GitHub搭建个人博客
Hexo+GitHub搭建个人博客
61 0
Hexo+GitHub搭建个人博客
|
10月前
|
缓存 JavaScript 网络安全
使用Hexo在Github上搭建个人博客
使用Hexo在Github上搭建个人博客
93 0
|
11月前
|
JavaScript Shell 网络安全
在Windows环境下使用hexo搭建博客以及部署到gitee / github
在Windows环境下使用hexo搭建博客以及部署到gitee / github
150 0
|
11月前
|
弹性计算 JavaScript Shell
github+hexo来搭建个人博客——保姆级教程
github+hexo来搭建个人博客——保姆级教程
1305 0
|
JavaScript 网络协议 Shell
Hexo+GitHub+Vercel搭建个人博客网站
直接安装,完成后,在cmd上输入node -v和npm -v查看是否安装成功,这两条命令如果都输出了版本号,那么就表示安装成功了
582 0