整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

手摸手使用Hexo和 Github Pages 搭建

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

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

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: https://github.com/light/light.github.io.git(比如这个就是你之前创建的page项目)

branch: master

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

npm install hexo-deployer-git --save

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

hexo clean
hexo generate
hexo deploy

大功告成,浏览器打开https://light.github.io.git(你的page地址),你将得到一个永久免费的个人博客。


博客示例


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

击查看智能机器人动图

====听说人工智能的时代就要来临了,你准备好了吗====


javascript课题:Web前端开发人工智能机器人

知识点: ajax概念解析,ajax封装,如何调用数据库

函数封装,javascript正则匹配,元素创建,企业开发标准

2017就业形势分析,面试技巧等

PS:现在人工智能很火,包括前端时间,腾讯的群里面都有了官方的机器人了,当然是为了活跃群气氛,也成了很多宅男的解闷的对象。我们今天的课题就是在自己的网站上搭建一个智能机器人的聊天窗口,当然数据不是我们自己编辑的,是从其他地方调用的,但是这样的一个项目也比较考验我们的前端知识的综合能力,特别是对于javascript的使用,包括ajax的封装等等,如果你的个人博客上也能有这样的一个人工机器人,我相信对于web前端的求职会有很大的帮助的!

如果想要更多的企业求职加分项目,案例,可以来一下我的前端群216634437,每天都会精挑细选一个特效,项目出来详细讲解,分享!

html/javascript人工智能机器人源码

需要文档版源码来我的前端群216634437,已上传到群文件

智能机器人学习视频:HTML5+javascript大神带你开发人工智能机器人

头条号里有许多web前端学习视频,企业常用特效/案例/项目,敬请关注!

看完这张图有多少想去@baby Q的?

为一个IT从业者,怎么能没有自己博客呢?虽然有很多平台可供使用,但总有太多的限制,有了自己的网站,就方便很多了。


通过hexo+github,搭建博客框架。


一、介绍


1.GitHub Pages

大家都知道,GitHub 是各种开源及私有软件项目的托管平台,目前已经拥有超过千万的开发者用户,使用 GitHub Pages 可以把我们托管到 GitHub 上的静态网站展示出来,而且还良心地给我们提供了一个免费的 HTTP 的 github 二级域名。我们通过 github 可以完全免费的享受从建站到 SSL 的全部服务,而且访问速度也不赖。要说明一点的是,只限纯静态网站(仅 html + css + js),对于写博客来说,已经完全够用了。


2.Hexo


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



二、创建个人仓库存放网站资源

  • 注册GitHub
  • 登录后,点击New repository创建新仓库,仓库名为:用户名.http://github.io 这里的用户名必须用你的GitHub帐号名称,否则后面会报错。





三、操作步骤


1.安装node.js


  • 到官网https://nodejs.org/,下载 Node.js 的安装包,根据自己的系统来选择;
  • 下载后直接双击按提示安装即可,会自动安装好npm ,并配置好环境变量;
  • 安装完成后,打开cmd命令行窗口,输入node -vnpm -v 检查是否安装成功。




2.安装并配置Git仓库


  • 到官网https://git-scm.com/,下载 Git ,按提示安装即可;
  • 在cmd命令行输入git version检查是否安装成功;
  • 安装成功后,通过以下命令绑定GitHub帐号:

找到Git安装目录,打开Git Bash窗口,设置user.name和 user.email :

git config --global user.name "你的 GitHub 用户名"
git config --global user.email "你的 GitHub 注册邮箱"


3.配置Git公钥


GitHub要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用 ssh 来实现。


在本地通过rsa非对称加密方式生成密钥对,然后把私钥放置在本地电脑,公钥放置在GitHub上,当你推送时,git就会匹配你的私钥跟GitHub上面的公钥是否配对,若匹配成功则认为你是合法用户,允许推送,不需要手动输入密码,这样可以保证每次的推送都是正确合法的。


  • 本地生成 ssh 密钥文件:

ssh-keygen -t rsa -C "你的GitHub注册邮箱",

然后连续三个回车之后,根据信息中的路径找到id_rsa.pub 密钥文件,复制其中全部内容;




  • 打开 GitHub-->setting-->设置 SSH key 页面,点击 new SSH Key,把刚才复制的内容粘贴到文本框中,保存(title 可以随便写);


  • 在Git Bash窗口中输入ssh git@github.com,若出现类似下面信息,说明公钥设置成功:




4.安装Hexo


Hexo就是个人博客网站的框架,先在本地电脑创建一个文件夹,可以命名为Blog,用于存放Hexo框架的内容和之后发布的网页等资源。


  • 进入创建好的Blog文件夹中,右击选择Git Bash here打开命令窗口;输入如下命令,使用 npm 安装Hexo :npm install -g hexo-cli


  • 检查安装完成:输入hexo -v




  • 初始化hexo文件夹

在Blog文件夹中执行下面的命令(其中 blog 是存放具体网站信息的文件夹,名字可以自定义):




  • 新建文章在本地预览

hexo new test_blog #新建一个文章

hexo g #生成静态页面

hexo s #启动服务器

在浏览器地址栏输入“http://localhost:4000/”打开页面,即可看到刚创建的页面:





5.将Git库与hexo连接起来


上面只是在本地预览,接下来要发布到GitHub上,就可以通过http://xxx.github.io的域名来访问。


  • 修改blog目录下的站点配置文件 _config.yml ,在最后 deploy 部分补充如下信息:

deploy:
type: git
repo: git@github.com:xxx/xxx.github.io.git
branch: master

其中 repo 要填入你之前在 GitHub 上创建的仓库的完整路径,保存文件。这一步其实是把Hexo与GitHub关联起来,使发布命令指向我们的GigHub仓库。


  • 安装 Git 部署插件

在cmd命令行窗口中,输入如下命令:

npm install hexo-deployer-git --save

发布网站

在 blog 目录下,分别输入如下三条命令:

hexo clean #清除缓存
hexo g
hexo d


  • 然后在浏览器地址栏输入你的个人网站的仓库地址,即 http://xxxx.github.io,博客就可以访问了。