github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(1)

先给你们看看个效果网站:

https://www.a2data.cn/

环境准备:

Node.js

Hexo

git

GitHub SSH key

Typora (Md格式书写工具)

idea(就是编辑工具,推荐webstorm)


安装Node.js

中文网:https://nodejs.org/zh-cn/download/

官方网站:https://nodejs.org/en/

直接下载对应的安装包,之后一顿操作,跟安装QQ一样。

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(2)

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(3)

安装步骤如下:

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(4)

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(5)

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(6)

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(7)

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(8)

选择安装

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(9)

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(10)

安装完成

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(11)

查看是否安装成功

启动:win键(就是windows图标得那个按键) R

输入:cmd

清空:cls

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(12)

安装hexo

npm install hexo-cli -g

输入npm install hexo -g,开始安装Hexo

输入 hexo -v 查看是否安装成功

提示:这个命令可以用cmd,webstom或者git的命令界面去运行。。

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(13)

创建博客

# 方式1 一定要是一个空的文件夹 mkdirsqlsq.github.io cdsqlsq.github.io hexo init

提示:这个命令可以用webstom命令界面去运行。。

启动服务就可以访问你的博客了

hexo s

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(14)

本地访问

到此,你已经可以搭建hexo 博客了,恭喜一波。

就直接点一下http://localhost:4000/就可以访问你的博客了

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(15)

以上你的个人博客就创建完成了!如果你也想让别人访问你的网站你就要把你的这个项目上传到你的GitHub!

接下来小编教你怎么上传到github并且设置好所有的配置!

安装Git

官网:https://git-scm.com/downloads

下载直接默认下一步即可:

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(16)

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(17)

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(18)

配置自己的ssh

桌面鼠标右键,点击Git Base Here。

# 设置 git 相关信息 gitconfig--globaluser.name"你得昵称" gitconfig--globaluser.email"your.email" # 生成密钥 ssh-keygen-trsa-C"youemail"# a2data@vip@qq.com `连续回车 3连击`即可完成密钥的生成创建。

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(19)

查看密钥

输入cd ~/.ssh,检查是否由.ssh的文件夹ls查看

# 本部分需要在 github上使用,别着急请往下看。 catid_rsa.pub

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(20)

先在本地创建一个文件把你的密钥保存下来,下面需要配置github ssh的时候需要用到!就不需要再查询了!

注册Github

打开github官网:https://github.com

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(21)

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(22)

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(23)

选择你得职业相关信息:

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(24)

创建并且会给你发邮件激活:

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(25)

登录邮箱激活:

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(26)

配置Github

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(27)

配置key

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(28)

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(29)

完成配置

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(30)

测试配置是否成功

输入ssh-Tgit@github.com,测试添加ssh是否成功。 输入yes, 如果看到Hi后面是你的用户名,就说明成功了

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(31)

配置成功之后就在GitHub创建你的项目仓库!用来保存你的博客

创建仓库

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(32)

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(33)

注意:仓库名格式必须只能这样写 你的用户名 github.io比如我github名字是zenganiu 那我的仓库名就是 zenganiu.github.io

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(34)

上传你本地的博客到Github

修改配置

修改你博客根目录中_config.yml文件,把你的github的仓库链接配置上去!

deploy: type: git repository: git@github.com:nianshaofeng/nianshaofeng.github.io.git branch: master

注意:格式repository填的是你的github仓库的ssh地址

怎么查看自己的仓库的ssh地址?

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(35)

配置好之后就可以把自己本地的博客上传到github了!

发布部署

# 在生成以及部署文章之前,需要安装一个扩展:如下图 npminstall hexo-deployer-git--save

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(36)

# 把项目打包 hexog # 把项目提交到github hexo d

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(37)

这样你的博客就上传成功了!你就可以让你的朋友直接访问你的博客项目了!

github写博客教程(教大家怎么用GitHub免费搭建自己的博客网站)(38)

,