美文网首页程序员入门Tech干货
0技术基础搭建GitHub免费博客

0技术基础搭建GitHub免费博客

作者: code_monkey | 来源:发表于2017-03-09 21:06 被阅读1601次

    开篇先聊聊我这标题


    0技术基础搭建github免费博客,爷们这名儿起的是不是很矛盾。为什么没技术基础还要弄github的免费博客,因为开始了这一步,之后就想学点儿技术了(带人入坑的邪恶感,哈哈哈)。其实写这篇文的目的也是为了实现像我一样热爱各种互联网技术但是没有技术的人满足一点点虚荣心,为了给像我一样急需成就感的人带来一丝丝成就感。为了下一步的学习,提供一些原动力。

    互联网时代,我们不寂寞。你看不到我,我看不到你。但是你看得到我的文字,我看到自己的心意。

    话不多说,开始正题。

    谁该玩玩这个东东

    • 想要免费BLOG的朋友
    • 无聊的学生
    • 喜欢MARKDOWN写作
    • 需要个人博客撑门面
    • 想进一步催促自己学习新技术的人
    • 等等

    环境基础

    ps:本文基于win10操作,mac用户请看20分钟教你使用hexo搭建github博客
    在见到您的博客之前,需要进行如下程序的安装:
    1 安装git
    2 安装 node.js
    3 注册github账号,这个流程就不赘述了,并创建仓库,如下图

    图片截自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里面:

    图片截自github

    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博客轻松更换主题外观

    相关文章

      网友评论

      • 正在加载更多:2018年双十一阿里云优惠活动 低至一折 有兴趣的小伙伴可以看看 https://m.aliyun.com/act/team1111/#/share?params=N.6ygA38M7hC.66fpu8sn
      • 4933e11d16fb:根据博主的例子,我也完成了博客的搭建。
        https://alili.tech
        前端大爆炸 Web BANG BANG BANG
        感谢博主。
        code_monkey:@WBBB宣传委 666
      • e39761e2d809:感谢楼楼,点赞
        code_monkey:@UPUP921 谢谢支持
      • 71e014fd262f:谢谢楼主分享。
        code_monkey:@港湾处寻觅她的背影ly 谢谢支持
        code_monkey:@港湾处寻觅她的背影ly 感谢支持~
        code_monkey:@港湾处寻觅她的背影ly 谢谢回复:smiley:
      • 352d61c21018:很好了,谢谢分享
        code_monkey:@愿无岁月可回头1 谢谢支持:fist:
      • zmj_action:为什么没有出现md文档呢??出现了这些$ hexo new "my-blog"
        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)
        怎么处理呀?
        7b1dd8d09588:做到这 npm install hexo-deployer-git --save,代码提示,npm WARN deprecated swig@1.4.2: This package is no longer maintained
        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
        。这该怎么弄呀。求楼主帮忙
        code_monkey:@赵明骏 刚刚在网上粗略的查了查,也许重新安装一下就可以解决了。突然接到导师的命令,来不及帮你搞了。
        code_monkey:@赵明骏 你这一大串真是难到我了……有个东西找不到了……我现在刚回宿舍……朋友你百度看看……赶明儿我也研究研究……
      • 85b3a3dd5974:感谢楼主已经弄好了😄
        code_monkey:@ChanceLetevivi 恭喜恭喜
      • 2dda521f895f:看了几篇博客的搭建,都是坑呐,这一篇就是看到的最详细的了,讲解的刚刚好很适合什么都不晓得的小白看~~谢谢啦~~
        code_monkey:@aiapple97 恭喜恭喜,我也是小白,共同进步。
      • 1997dfce2708:哇,真的好喜欢你的写作风格
        code_monkey:@小毛驴_660a 哇,谢谢赏识!
      • 66021301f7fa:谢谢楼主
        code_monkey:@7月7日晴i 是因为你没有登陆吗?我刚刚试了试是可以的。如果不行你可以私信给我图看看。
        7月7日晴i:https://github.com/settings/ssh这个网址点过去为什么没有跳到那个页面..
        code_monkey:@傅凯亮 亮神。谢谢支持
      • 楊建勇:今天刚做弄这个,之前一直都没弄,谢谢了
        code_monkey:@John菜鸟 这个蛮有趣的,加油

      本文标题:0技术基础搭建GitHub免费博客

      本文链接:https://www.haomeiwen.com/subject/kxwwgttx.html