开篇先聊聊我这标题
0技术基础搭建github免费博客,爷们这名儿起的是不是很矛盾。为什么没技术基础还要弄github的免费博客,因为开始了这一步,之后就想学点儿技术了(带人入坑的邪恶感,哈哈哈)。其实写这篇文的目的也是为了实现像我一样热爱各种互联网技术但是没有技术的人满足一点点虚荣心,为了给像我一样急需成就感的人带来一丝丝成就感。为了下一步的学习,提供一些原动力。
互联网时代,我们不寂寞。你看不到我,我看不到你。但是你看得到我的文字,我看到自己的心意。
话不多说,开始正题。
谁该玩玩这个东东
- 想要免费BLOG的朋友
- 无聊的学生
- 喜欢MARKDOWN写作
- 需要个人博客撑门面
- 想进一步催促自己学习新技术的人
- 等等
环境基础
ps:本文基于win10操作,mac用户请看20分钟教你使用hexo搭建github博客。
在见到您的博客之前,需要进行如下程序的安装:
1 安装git
2 安装 node.js
3 注册github账号,这个流程就不赘述了,并创建仓库,如下图
点击Start a project,然后出现下图,并按照如下格式填写
看图中的圈圈看懂了吗?左边圈圈里显示的啥,右面圈圈里就填啥,也就是说注册账号的时候,你的用户名设置的什么,就填写什么,格式如下:
你的用户名.github.io
而这个地址,也就会成为可以访问你博客的网址咯!其他地方可填可不填,然后提交,至此,我们的准备工作也就结束了。但是提交之后的页面不要关闭哦,留着,稍后我们还会用到。然后,接下来的步骤就快起来了。
开始起飞
起飞第一步
打开你的git,输入如下代码
ssh-keygen -t rsa -C "Github的注册邮箱地址"
一路回车之后会得到两个文件:id_rsa和id_rsa.pub,然后
用带格式的编辑器(比方说notepad++或者sublime)打开id_rsa.pub,复制里面的所有内容,然后进入https://github.com/settings/ssh粘贴到KEY里面:
Title可以随便写名字。完事儿点击添加,至此我们的工作完成了一大半。
起飞第二步 安装HEXO
声明:这一步可以说是空前绝后的一步,重中之重,好好把握。
先不用管HEXO是什么(感兴趣的同学可以点我来根据官方文档部署HEXO,可能需要翻墙)
1 打开git Bash
2 输入
npm install -g hexo-cli
回车,等待安装完成。
3.安装 Hexo 完成后,分步执行(即输入代码之后敲回车)下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
hexo init <folder>
上文中folder替换为你想要放置自己博客在本地磁盘上的位置比如说hexo init f:/blog
再之后执行
cd <folder>
比如说cd f:/blog
最后执行
npm install
小黑底儿白字一阵滚动之后,就完成了博客的初始化。初始化完成之后之前设定目录下的文件夹里面应该是这样的
博客的根本起飞第三步,对博客进行配置
1.找到_config.yml文件,用前面提到的编辑器打开,修改如下部分:
title: 哈哈哥//网站标题
subtitle: 哈,比哈哈少一哈//网站副标题
description: 哈哈哈,比哈哈多一哈//网站描述
author: 侯康//您的名字
language: zh-CN//语言
timezone: Asia/Shanghai//时区
注意:每一项的冒号后面都要留下一个空格,再进行内容填写。
2.域名配置
顺着前面的配置往下走,有个url项,这就是域名配置。自己有域名的同学可以绑定自己的域名,自己没有域名的同学就乖乖填写之前自己设置的网址吧~
url: http://houkang.github.io
注意:这里的url的冒号后面,还是要留下一个空格。这个配置文件里面所有的内容填写,都要留下一个空格,再写具体内容。
3.deploy配置
找到deploy部分,然后按照如下格式填写
type: git
repo: https://github.com/houkang/houkang.github.io.git
branch: master
首先,没有的项自己添加~
其次,repo里面的地址在如图:
点击箭头指向部分,复制框内的链接,然后粘贴到repo内。
最后,branch填写master即可。
起飞第四步 通过git 将本地文件传到你的github里
首先
如果之前退出了git,我们需要先访问到我们的网站的根目录
cd <folder> //比如 cd f:/blog
在git bash里,输入
npm install hexo-deployer-git --save
然后输入
hexo deploy
等待进度走完吧~
这样,你的网址就可以访问了。赶紧去看两眼。咿呀,最关键的部分忘了,怎么编辑内容呢?
起飞最终步 内容编辑与更新
先说说内容编辑
还是在git里,如果之前退出了git,记得访问文件目录
进而,我们执行
hexo new "你想要的文章标题填在这个双引号里"
这样,你的md文档就生成了,这两步如图
文章编写然后到图中所给出的地址,我这个是
F:\blog\source\_posts\文章标题.md
找到文章标题.md
用编辑器打开它,它是支持MARKDOWN语法编辑的哦,要不然为啥后缀是md呢。
编辑好自己的文章,保存之后。
再回到git里面输入
hexo clean ; hexo genarate
回车之后,再输入
hexo deploy
再去访问你的首页吧,是不是文章就出现了,惊喜吧!
我刚刚搭建完成的首页PS
我个人程序盲,所以写的东西很俗,但是我又是个程序狂,热爱一切新鲜的技术和内容。
初涉此道,希望能跟大家成为朋友。
文笔不好,内容很糙,但是小弟用心写了5个多小时。但愿能给想要做这件事的朋友们一点儿帮助。
我知道,写这么久,并不是反映了我撰稿辛苦,而是反映了我能力的缺失。从上大学到今年刚刚读研究生,我该开始学点儿什么了。
内容编辑过程中,朋友给发来了一篇文章,我在这篇文章里又发现了第二篇文章的链接,读完两篇文章之后我又对我的内容进行了很多修改,本文有部分内容借鉴了这两篇文章:
20分钟教你使用hexo搭建github博客
手把手教你建github技术博客
他们的排版以及内容结构,都非常值得我学习。
续作,想要接着试试更换主题的朋友点这里哦GITHUB+HEXO博客轻松更换主题外观
网友评论
https://alili.tech
前端大爆炸 Web BANG BANG BANG
感谢博主。
FATAL Cannot find module 'D:\blog\node_modules\hexo-generator-feed'
Error: Cannot find module 'D:\blog\node_modules\hexo-generator-feed'
at Function.Module._resolveFilename (module.js:469:15)
at Function.resolve (internal/module.js:27:19)
at D:\blog\node_modules\hexo\lib\hexo\load_plugins.js:51:24
at tryCatcher (D:\blog\node_modules\bluebird\js\release\util.js:16:23)
at MappingPromiseArray._promiseFulfilled (D:\blog\node_modules\bluebird\js\release\map.js:61:38)
at MappingPromiseArray.PromiseArray._iterate (D:\blog\node_modules\bluebird\js\release\promise_array.js:114:31)
at MappingPromiseArray.init (D:\blog\node_modules\bluebird\js\release\promise_array.js:78:10)
at MappingPromiseArray._asyncInit (D:\blog\node_modules\bluebird\js\release\map.js:30:10)
at Async._drainQueue (D:\blog\node_modules\bluebird\js\release\async.js:138:12)
at Async._drainQueues (D:\blog\node_modules\bluebird\js\release\async.js:143:10)
at Immediate.Async.drainQueues (D:\blog\node_modules\bluebird\js\release\async.js:17:14)
at runCallback (timers.js:672:20)
at tryOnImmediate (timers.js:645:5)
at processImmediate [as _immediateCallback] (timers.js:617:5)
怎么处理呀?
npm ERR! path D:\blogthree\node_modules\fsevents\node_modules\getpass\node_modul es
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall scandir
npm ERR! Error: EPERM: operation not permitted, scandir 'D:\blogthree\node_modul es\fsevents\node_modules\getpass\node_modules'
npm ERR! { Error: EPERM: operation not permitted, scandir 'D:\blogthree\node_mo dules\fsevents\node_modules\getpass\node_modules'
npm ERR! stack: 'Error: EPERM: operation not permitted, scandir \'D:\\blogthre e\\node_modules\\fsevents\\node_modules\\getpass\\node_modules\'',
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'scandir',
npm ERR! path: 'D:\\blogthree\\node_modules\\fsevents\\node_modules\\getpass\\ node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\李书强\AppData\Roaming\npm-cache\_logs\2018-02-27T08_55_37 _855Z-debug.log
。这该怎么弄呀。求楼主帮忙