5分钟 搭建免费个人博客

作者: dimsky | 来源:发表于2016-04-17 01:22 被阅读65247次

    五分钟倒数已经可以计时了。

    三步完成免费个人博客搭建, 这是一篇小白也能看懂的文章,本文主要针对mac OS ,Windows 除了软件安装方式和命令有些区别(装了git bash也一样),其他基本一样。

    你可能会经常看到类似于这样的博客:

    vno 这是打酱油的

    在4分50秒以后你也能够有一个类似的blog了。

    有简书了为什么还需要个人博客呢,除了装逼,当然还有个人博客更加自由,不受任何第三方管理,并且还能够自定义成自己喜欢的样子。还有,如果你是个程序猿,那就更没有理由不自己搭建一个独立博客了。
    好了,不BB了。抓紧时间开始。

    1. 创建Github 域名和空间

    1.1注册

    首先你需要注册一个Github账号,已有的可以下翻去1.2 创建仓库,注意username,这会影响到你的域名,你的域名将会是 username.github.io ,所以认真的取个名字吧。

    Create account

    注册过程可能需要验证你的邮箱,其他就不在赘述。

    1.2 创建仓库

    然后需要创建一个仓库(repository) 来存储我们的网站,点击首页任意位置出现的 New repository按钮创建仓库, Respository name 中的username.github.io 的username 一定与前面的Owner 一致,记住你的username下面会用到。

    Create reponsitory

    第一步就已经完成了,下面是安装。

    2. 安装

    Hexo 可以说是目前最流行的博客框架了,基于Nodejs,更多信息可以google,下面需要安装的工具包括 Git,Nodejs,Hexo。(Windows 用户自行搜索这些工具,直接安装即可,试过基本没啥问题)

    1. 安装Git
      我就想问问,还有谁没装Git么?
      // 如果已安装HomeBrew 无需执行此行
      $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

       $ brew install git   // 安装Git
      

    你也可以通过下载安装程序来安装

    1. 安装Nodejs
      先安装nvm,这是Nodejs版本管理器,可以轻松切换Nodejs版本。 这里有两种方式安装。如果使用curl的方式安装,安装完成之后一定要重启终端。
      1. Homebrew 安装方式,此安装方式无需重启
      $ brew install nvm
      $ mkdir ~/.nvm
      $ export NVM_DIR=~/.nvm
      $ . $(brew --prefix nvm)/nvm.sh

       2. curl安装方式
       $ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
      

    安装完成后,重启终端 并执行下列命令即可安装 Node.js。
    $ nvm install 4

    1. 安装Hexo
      以上所有都安装完成之后再安装Hexo
      $ sudo npm install hexo-cli -g

    所有必须工具已经安装完成,下面我们就可以生成博客,上传至我们的Github 仓库了。

    3. 编写,发布

    接下来我们需要用Hexo初始化一个博客,然后更改一些自定义的配置,或者加上自己喜欢的主题,写上第一篇文章,然后发布到自己的个人Github网站(username.github.io)。

    1. 创建博客
      将下面的 username 替换成你自己的username(其实也无所谓,作者强迫症),执行成功后,会创建出一个名为 username.github.io 的文件夹。
      $ hexo init username.github.io

    2. 更改配置
      主题安装
      为了使博客不太难看,我们需要安装一个主题,切换至刚刚生成的Hexo 目录,安装主题
      $ cd username.github.io
      $ git clone https://github.com/iissnan/hexo-theme-next themes/next
      这里选了一个极简的主题,也是Hexo众多主题中最受欢迎的一个。上面出现的喵神的主题 在这里。Hexo也有更多主题供你选择。
      基础配置:打开文件位置username.github.io/_config.yml修改几个键值对,下面把几个必须设置的列出来按需求修改,记得保存, 还有注意配置的键值之间一定要有空格更多设置...
      title: dimsky 的 9 维空间 //你博客的名字
      author: dimsky //你的名字
      language: zh-Hans //语言 中文
      theme: next //刚刚安装的主题名称
      deploy:
      type: git //使用Git 发布
      repo: https://github.com/username/username.github.io.git // 刚创建的Github仓库
      主题配置:
      主题配置文件在username.github.io/themes/next/_config.yml中修改,这里略过。设置详情

    3. 写文章
      所有基础框架都已经创建完成,接下来可以开始写你的第一篇博客了
      在username.github.io/source/_posts下创建你的第一个博客吧,例如,创建一个名为FirstNight.md的文件,用Markdown大肆发挥吧,注意保存。
      如:

       ---
       title: First Night
       ---
       > 我有一头**小毛驴**,可是我从来都不骑。
      
    4. 测试
      $ hexo s
      测试服务启动,你可以在浏览器中输入https://localhost:4000 访问了。

    5. 安装hexo-deployer-git自动部署发布工具
      $ npm install hexo-deployer-git --save

    6. 发布
      测试没问题后,我们就生成静态网页文件发布至我们的Github pages 中。
      $ hexo clean && hexo g && hexo d
      如果这是你的第一次,终端会让你输入Github 的邮箱和密码,正确输入后,骚等片刻,就会把你的博客上传至Github 了。以后在每次把博客写完后,执行一下这个命令就可以直接发布了,灰常苏胡。

    7. 5分钟应该快到了
      是不是很快,恭喜你能走到这一步,你的博客已经完成了,在浏览器中输入 http://dimsky.github.io 就能够访问了。
      最后应该是类似这个样子的

    时间有限,这里只说到了简单的博客创建流程,还有很多很好玩的配置与插件。比如说评论、标签、统计等等。慢慢的完善你的专属博客吧。

    更多

    更多主题
    更多插件

    相关文章

      网友评论

      • 盼盼学士:挺不错的,怎么联系你加一下微信吧
      • 枫叶红花:我的代码同步不了git,不过服务器上已经搞定了
      • 杰森惠:我是小白 第二部就不会了 那个程序怎么装呀。苦恼
      • ac1da5ce34dc:创建github用户名显示成功但登不上去,怎么回事?永远停留在创建成功页面,跳不到第二步
      • 庄泽峰:看起来不错!
      • 岁岁月如歌:为啥启动了,无法访问localhost:4000?
      • 1372df4eb5d0:第二步后操作有点儿乱了。。。下载了GIT,但没有exe程序啊。。。额。。。我要安装什么啊。。。额。。。想死。。。
      • aiioriickw:刚搭好没几天,欢迎各位大佬们来看看http://www.6ke.com.cn
      • Sunday_David:前排提示:很多都是过时的

        我找到比较新版的:https://www.jianshu.com/p/1519f22aff24
      • 6da1066b0981:刚搭好没几天,欢迎各位大佬们来看看http://www.stormjie.top
      • 二十岁的男人:http://lancelik.github.io 坑了我一个多月,各种小心照顾
        3166515b2946:毕竟是 github 上的,国内访问速度太慢了
      • nice生活:https://tsoil.github.io/ 不止5分钟我弄了一天太多坑了
        榕树下野猫:@真三泥 是的, 我想问的是这个问题该如何解决
        nice生活:@榕树下野猫 没有配置环境变量 找不到hexo命令
        榕树下野猫:请问安装 hexo 之后 hexo init 有一个 -bash: hexo: command not found 有没有遇到,怎么解决的?
      • 行走的菜谱:请问楼主,如果给自己的md文件添加图片,图片放在哪里比较合适呢
        nice生活:简书
      • 岚岚岚岚懒:看不太明白,不能直接网页编辑么?刚刚完成了第一步,到编辑页面就看迷茫了
        _SoLo_:本地创建md文件,然后通过git push到github,最后由github负责呈现网页效果
      • 张振伟:最近也在用Hexo+Coding搭建个人博客(https://zhangzw.com)但是搭起来了没人访问:smile:
        EvinK:我也, http://evink.me !!
        张振伟:@南国大壮 网上很多文章可以参考的。可以简单理解,HEXO是一个可以将你写的markdown文章编译成HTML静态文件的工具,Coding是一个存放HTML网页的空间,把网页上传上去后就可以访问。
        安化宫主:大神怎么弄啊
      • d8b732f9c1c5:本人觉得有点时间应该能会 分享心得的是最好的教材
      • d8b732f9c1c5:表示不会有点懒也没人教
      • 5cca4d08d547:你好,推送成功了但是输入域名还是404
      • c8785377347b:打开之后没有repo怎么回事
      • 肥胖的蚂蚁:zibo666.com 我的个人博客
      • 901d986b6e56:好复杂,还要上英文网站,花了40块钱在腾讯云上买个域名买个主机就一站式搞定了。
      • fire_inTheHole:0基础的话一星期都搞不出
      • 5ee22df73859:博客配置好,博文呢?!
      • 453418aa45b7:还在不?那个config.yml是如何来设置的,我的和你的不一样?
      • 一名seoer:我还是用服务器搭建吧
      • 大牛在郑州:前边的都顺利,到第6步,发布,执行 hero clean 报错:什么原因呀。
        FATAL Cannot find module '/Users/niuting/Desktop/博客git/niunaruto.github.io/node_modules/hexo-renderer-marked'
      • ptlCoder:怎么切换其他的主题勒??
      • MikUlA:骗人啊,我用了1天的时间
      • ilmari:再次打开 提示hexo: command not found
      • ilmari:再次打开 提示hexo: command not found
      • 卢卡Lucar:每一次更新之后连接就被重置了,这问题怎么解。
      • fca7ee95e805:Usage: hexo <command>

        Commands:
        help Get help on a command.
        init Create a new Hexo folder.
        version Display version information.

        Global Options:
        --config Specify config file instead of using _config.yml
        --cwd Specify the CWD
        --debug Display all verbose messages in the terminal
        --draft Display draft posts
        --safe Disable all plugins and scripts
        --silent Hide output on console

        For more help, you can use 'hexo help [command]' for the detailed information
        or you can check the docs: http://hexo.io/docs/
        执行最后一步的时候这样 没让输邮箱和密码 然后搜索是404,哪出错了呀
        453418aa45b7:就是没有这个命令,可能是这篇文章太老了把。
        暴暴bao:你解决了吗我也是这问题
      • 小小云喵::smile: 喜欢·赶紧搞起
      • 全能程序猿:http://blogxinxiucan.sh1.newtouch.com/

        这是我打理了2个月的个人博客。。。表示自己搭建这个博客初始的模型花了整整1天的时间,然后又做各个细节的处理。
        第二天:添加百度统计,百度,Google,搜狗等 推送
        第三天:添加robots.txt,百度。Google站点地图等等,SEO,CDN
        第四天:给文章添加留言 《选择第三方》。。中间换过好几个,像网易云等等后来选择的畅言
        之后。。。 给文章添加统计
        。。。
        深沟球轴承:打不开啊,
        全能程序猿:@Hello丶yz 云服务器到期了
        zhenglisec:求教怎么搭建的博客
      • 8fbb375c712b: 跟着教程顺利搭建成功了,期间自己更改了一些东西,然后都成功了,突然有一次更改过后就不行了。hexo s 没问题,hexo g没问题,hexo d 就是不成功,百度那些答案也没解决,不知道为什么,要崩溃了。。。
        $ hexo clean && hexo g && hexo d
        INFO Deleted database.
        INFO Deleted public folder.
        INFO Start processing
        INFO Files loaded in 522 ms
        INFO Generated: index.html
        INFO Generated: archives/index.html
        INFO Generated: img/default-skin.png
        INFO Generated: fonts/default-skin.b257fa.svg
        INFO Generated: archives/2017/index.html
        INFO Generated: main.507b3a.css
        INFO Generated: slider.e37972.js
        INFO Generated: main.507b3a.js
        INFO Generated: fonts/iconfont.16acc2.ttf
        INFO Generated: fonts/iconfont.45d7ee.svg
        INFO Generated: fonts/iconfont.8c627f.woff
        INFO Generated: img/preloader.gif
        INFO Generated: fonts/tooltip.4004ff.svg
        INFO Generated: mobile.fdc4b7.js
        INFO Generated: img/scrollbar_arrow.png
        INFO Generated: fonts/iconfont.b322fa.eot
        INFO Generated: archives/2017/09/index.html
        INFO Generated: 2017/09/22/hello-world/index.html
        INFO 18 files generated in 286 ms
        ERROR Deployer not found: git
      • Tamp_:说实话步骤很有问题,很多都是因为标题点的喜欢吧
      • pro_xiaoy:ERR_SSL_PROTOCOL_ERROR????
      • 李大宽:盗用王巍大神的图
      • 笑哈哈的二傻:博客上传不到github上啊,到测试那一步都还可以,执行后面上传的命令也没出错,但进入自己的github博客上却没更新
      • 6d5cec28e40b:你好,代码里面$是什么意思?这些在window s系统下使用的吗?
        榕树下野猫:git 命令
      • e86a5b283bd9:一开始我也喜欢弄谢些花里胡哨的东西,买个阿里云,搭个workpress,然后呢,没什么用,php看不懂,数据不懂怎么交互,页面不会改只能套套模板,所以说还是得脚踏实地一步步学。学好了想怎么弄就怎么弄。
      • bigfish1129:怎么增加评论功能
      • 莫寂岚:hexo s这一步始终跑步起来啊
      • 1a165806d606:说command not found的难道在用window?mac表示完全没问题!感谢作者!
      • 1016f8abb9a8:最后hexo d的时候报错
        could not read Username for 'https://github.com' Invalid argument
        这个怎么弄
      • 1f40b4adf3ba:不得不吐槽这个经验贴,各种command not found,哎
      • 3092069ff4ab:hexo s 输出结果:can not read a block mapping entry; a multiline key may not be an implicit key at line 8, column 12 什么原因?
      • upupSue:4、测试$ hero s

        输出
        WARN No layout: index.html
        是什么原因
      • 75afc06dcc73:发布了一篇文章之后,再发布就一直错误at Module._compile (module.js:571:32) code: 'MODULE_NOT_FOUND' }
      • Demo6012:打开文件位置username.github.io/_config.yml修改几个键值对 请问楼主大大 这个是在哪里打开的。。。。百度了也没看懂
      • 翀鹰精灵:到第六步发布
        测试没问题后,我们就生成静态网页文件发布至我们的Github pages 中。
        $ hexo clean && hexo g && hexo d
        执行完之后报了个error
        INFO Deleted database.
        INFO Start processing
        INFO Files loaded in 265 ms
        INFO Generated: index.html
        INFO Generated: archives/index.html
        INFO Generated: fonts/fontawesome-webfont.eot
        INFO Generated: fonts/FontAwesome.otf
        INFO Generated: fonts/fontawesome-webfont.woff
        INFO Generated: archives/2017/03/index.html
        INFO Generated: fonts/fontawesome-webfont.svg
        INFO Generated: archives/2017/index.html
        INFO Generated: fonts/fontawesome-webfont.ttf
        INFO Generated: js/main.js
        INFO Generated: css/vno.css
        INFO Generated: images/background-cover.jpg
        INFO Generated: images/show/google-analytics.jpeg
        INFO Generated: images/show/list.jpeg
        INFO Generated: images/show/article.jpeg
        INFO Generated: images/show/baidu_tongji.jpeg
        INFO Generated: 2017/03/14/hello-world/index.html
        INFO Generated: images/show/home.png
        INFO 18 files generated in 890 ms
        ERROR Deployer not found: git //ʹ��Git ����
        大牛在郑州:好了么
        大牛在郑州:@镍铬合金 好了么
        8fbb375c712b:朋友,你的这个问题解决了吗,我也遇到了,我顺利创建成功了,然后前面修改后hexo d都行,突然有一次后就不行了。。。
      • HelloYeah:感谢博主分享。写的非常详细。:+1: 照着步骤一步一步,成功上传静态网站,但是,访问404. 这是我的https://github.com/HelloYeah/HelloYeah.github.io,访问地址设置为http://helloyeah.github.io,能否帮我看看什么原因
        HelloYeah:本地测试也没问题
      • 玉思盈蝶:打开文件位置username.github.io/_config.yml修改几个键值对...这个在哪弄呢?不知道从哪进?
      • 陈伯君:谢谢你的教程,按照你的教程已经初步完成了自己的博客。明天继续优化,新增功能。谢谢
      • Henrya:搞定了,https://henry519.github.io/ 以后就在这里装逼了:smiley:
        5cca4d08d547:是推送到git上以后就可以直接访问域名了吗?
      • 95d9187405ec:文件已经传上去了,但是访问不到,这是什么问题呢?无法访问此网站
        网址为 的网页可能暂时无法连接,或者它已永久性地移动到了新网址。
      • 8c0a33c0e9cb:{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
        { [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
        { [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }出现这个问题一直搞不懂,现在都没有解决,没办法把代码部到github上!!!
      • 9ea95b711416:你好,我请问一下,我在执行最后一步$ hexo clean && hexo g && hexo d 的时候返回The requested URL returned error: 403,是什么原因造成的呢
      • d6e9cf48fc08:收下了,谢谢!
      • 天山雪莲_38324:在测试时出了问题,不知能否与交流一下呢?博主。方便的话,留下QQ号、
      • 天山雪莲_38324:主题配置在哪里打开主题配置文件呢?在终端吗?实在不晓得啊。相关配置如何修改,看原文省略了,能详细说一下吗?
      • d93fcad66401:嘻嘻,作者说的系统,没听过,可能是我没遇到过吧,国内的好像基本都是wp zblog或者dede:smiley:
      • smartphp:本地可以执行的,上传不了的,要注意一下配置文件的写法,冒号后面有空格。
      • smartphp:你好,看了你这篇文章也搭了个服务器,确实很简单。有个问题,这个做微信服务器不知道可不可以?初始化应该怎么配置。共享链接就可以了
      • 008ab269f44e:实用干货
      • z77z:[博客地址] http://z77z.oschina.io
        5cca4d08d547:推送到git以后就可以直接访问域名了是吗?
      • s_shi_hua:学习之,搭建个人博客
      • DSperson:楼主 如何更新 呢?
      • Midsum:我的执行最后一步 报Error Deployer not found: git 我在配置文件里加了个repo 添加上了刚创建的git库地址
      • 橘子的皮: 你好,我打不开username.github.io/_config.yml,怎么办啊/
      • f6eff25345b4:大功告成,感激不尽
      • 爱阿爸的阿龙龙:待会搭建去!
      • EightZERO:好棒,不过我天资愚钝 :yum: ,花了好几个小时才建好,http://eightzero.win
      • 遛狗的程序员:不需要购买域名吗?
      • 遛狗的程序员:hexo s 后打开不了,代理关了,端口号换了也没有用
      • KuKuMan:可以有动态评论吗,楼楼
      • dc85d42c04bb:不对啊,我的页面404了,我去
      • dc85d42c04bb:不错啊兄弟,文件名随便命名对吧。还有生成gh-pages自动生成的页面就好了吧,非常感谢
      • helloDolin:哈哈,ok了,github发的邮件一直没注意

        You are attempting to use a Jekyll theme, "landscape", which is not supported by GitHub Pages. Please visit https://pages.github.com/themes/ for a list of supported themes.

        换个名字就ok了

        :smile:
        5cca4d08d547:推送到git以后就可以直接访问域名了是吗?
      • 思念那年慕云:mrhandeMacBook-Air:~ Mrhan$ brew install nvm
        Error: Your Xcode (8.0) is outdated.
        Please update to Xcode 8.1 (or delete it).
        Xcode can be updated from the App Store.
        必须要更新8.1?
      • 3ce13787f7eb:你好 , 我在配置 hexo s 的时候 报出错误为: a multiline key may not be an implicit key at line 13, column 1 关于这个问题 请问该怎么解决呢
      • 大大大大大圣:是不是遗漏什么了?走到nvm install 4就执行不下去了,显示nvm: command not found
      • 稻草人12138:安装Hexo之后,Hexo一直处于运行状态,这时候没办法进行下一步 啊,关掉终端的话http://localhost:4000就打不开了
      • 常青的秘密:待会试试
      • DSperson:楼主如果我换电脑了 怎么办?直接将之前的博客复制过来可以吗?
        DSperson:@dimsky ok 谢了哈
        dimsky:@Ds_Run 可以,也可以直接通过git clone 下来
      • marsggbo:五分钟对小白来说不可能😂
      • 我心似海洋1995:明天试试
      • Kevin_Jern:不错。
      • 文字是本命耶:请问为什么hexo s测试的时候成功 但浏览器输入网址的时候就是无法显示网页啊
      • 奈何138:之前做了一个发布道github了, 现在又想发布道另外一个github 但是输入了hexo clean && hexo g && hexo d 回报错~~~求助大神
      • dongshangtong:可以哦
      • HelloRyan:再次打开 提示hexo: command not found
        HelloRyan:@bugmaker_qx http://www.jianshu.com/p/fb0b0258362f
        9f0676db9f81:@HelloRyan 我也是
      • youngyunxing:不完整,第二次再写文章,nvm,hexo都提示找不到命令,又要折腾半天
      • 安卓小生:可以哎
      • 安卓小生:可以哎

      本文标题:5分钟 搭建免费个人博客

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