龙空技术网

手摸手使用Hexo和 Github Pages 搭建个人博客!

Happy影音 155

前言:

目前姐妹们对“html个人博客”大约比较关怀,兄弟们都想要分析一些“html个人博客”的相关知识。那么小编在网络上网罗了一些有关“html个人博客””的相关内容,希望姐妹们能喜欢,各位老铁们快快来了解一下吧!

Github应该很多人都有听说过,全球最大的同性社交网站,一个面向开源及私有软件项目的托管平台,也是一个分布式版本控制系统。

Github Pages则是github上的一项功能,可以放置网页文件到指定文件夹,然后给你一个专属域名用于展示一些项目,但现在大多用来开发制作个人博客网站。而你需要做的就是创建一个项目、编辑项目内容、推送到远程服务器,打开对应的地址就能看到你想要的东西了。接下来就一步步来搭建个人博客吧。

GitHub Pages

想要一个这样的免费博客你首先需要有github的账号,首先转到GitHub并创建一个名为username.github.io 的新存储库,其中username是您在GitHub上的用户名,如下图(比如我注册的用户名叫light)。

创建新的仓库

把代码拉到本地(git clone 或者 download都可以),在项目根目录新增一个index.html的文件,内容可以是你想要的任意,保存更改,提交的github,打开light.github.io这个你定义的域名,如果访问成功你会看到你刚刚在Index里面写的东西。其实到这里你的个人主页其实就完成了,你可以在项目里任意组织你的结构,这是一个完整的静态资源网站,做一个绚丽的个人网络简历还是很方便的,前提是你熟悉html、js、css等。好了,接下来介绍下如何用Hexo维护个人博客。

Hexo是一个轻量、简易、高逼格的博客生成系统,hexo 可以理解为是基于node.js制作的一个博客生成工具,不是一个开源的博客系统。hexo不需要部署到我们的服务器上,hexo通过将markdown语法编写的文章,生成静态的html页面,然后将生成的html上传到我们的服务器(这里指的是githubpage)。

Hexo

生成一个博客项目:根据官网提示依次

npm install hexo-cli -g > hexo init myblog > cd myblog > npm install > hexo server

这样一个初始化的博客就打开了,在项目的source文件夹下编辑markdown文档,这些md文件就是你的一篇篇的Blog,不熟悉语法的同学可以找一篇照着写。

Hexo项目目录结构

有了个人Blog怎样才能在亲朋好友面前ZB呢?关联你的githubpages:快速在项目根目录下找到 _congif.yml,找到 deploy 字段(没有新增)并填写完整如下代码,直接拿(copy)。

type: 'git'

repository: (比如这个就是你之前创建的page项目)

branch: master

还差一步,我们需要一个工具来帮助我们将生成的静态资源推到仓库上:

npm install hexo-deployer-git --save

接下来就是激动人心的时刻,要发布了。只要在项目的命令提示行执行下面命令就行(easy)

hexo cleanhexo generatehexo deploy

大功告成,浏览器打开(你的page地址),你将得到一个永久免费的个人博客。

博客示例

另外,hexo支持主题、插件等。

标签: #html个人博客