我的博客搭建过程

发表于   |  

折腾了一下午，终于借助NexT把博客搭建起来了，接下来我会在这里记录我的学习前端的历程，
多多指教(●’◡’●)

以下是我参考的一些资料和我建博客的过程，各个文件用途是什么，_config.yml有什么配置信息，最好先通读一遍，一步步按参考资料做，其实也不难。初学者如果建不成功，删除再来一遍。欢迎交流(●’◡’●)

参考资料

搭建步骤

nodejs GitBash npm 是必须工具

1.安装

1
npm install -g hexo-cli

2.启动

1
2
hexo init  //初始化项目
npm install

注：hexo init [folder]，使用该命令初始化一个站点，不加目录参数，就初始化当前目录

3.配置 _config.yml 文件

以下是个人配置，其他配置信息默认就行

  • 设置个人站点信息

    1
    2
    3
    4
    5
    6
    title: 前端学习者
    subtitle: 前端水深，学无止境，生活还有诗和远方
    description: 前端 | javascript | css | html
    author: 曾佳英
    language: zh-Hans
    timezone:

  • 设置URL部分

    1
    2
    //设置为个人的github博客地址
    url: https://jiayingzeng.github.io/

  • 写作配置

    1
    2
    // 新建文章的默认命名
    new_post_name: YYYY-MM-DD-title.md

  • 部署

    1
    2
    3
    4
    5
    deploy:
      type: git
      //个人的仓库地址
      repo: https://github.com/JiayingZeng/JiayingZeng.github.io.git
      branch: master

按以下步骤完成

  • hexo new [layout] <title>，创建一篇文章，如果不指定layout，那么就使用_config.yml中default_layout的值，标题中如果有空格，将整个title放到引号中。比如，hexo new "hello world"创建一篇叫hello world的文章。
  • hexo generate，简单的说，这个命令就是将md格式的文章，生成静态网页。这个命令可以简写为hexo g，它有两个参数选项：
    • -d,--deploy 生成完后直接部署
    • -w,--watch 查看文件的改变
  • hexo server，启动一个本地服务，可以在本地查看网站，默认启动http://localhost:4000，貌似这个不是默认，运行命令的时候可以查看提示消息。它也有一些参数：
    • -p,--port 指定端口
    • -s,--stati 仅服务静态文件
    • -l,--log 开启日志
  • hexo deploy 部署站点，可以缩写hexo d，有一个参数，hexo d -g表示在部署前先重新生成一下站点
    注： 操作以上步骤后，打开你的博客地址就可以看到啦

出现的问题

升级hexo碰到“Deployer not found”问题及解决
再不行的话 把.deploy_git文件删除，再执行npm install hexo-deployer-git --save，hexo g

更进一步

主题设置

hexo-theme-next

1
theme: next

多说或Disqus评论设置

参考链接
https://github.com/iissnan/hexo-theme-next/wiki/%E8%AE%BE%E7%BD%AE%E5%A4%9A%E8%AF%B4-DISQUS

侧边栏个人信息设置

  • 社交链接
    编辑站点的 _config.yml，新增字段 social，然后添加社交站点名称与地址即可。例如：

    1
    2
    3
    4
    5
    6
    7
    social:
      github: https://github.com/your-user-name
      twitter: https://twitter.com/your-user-name
      weibo: http://weibo.com/your-user-name
      douban: http://douban.com/people/your-user-name
      zhihu: http://www.zhihu.com/people/your-user-name
      # 等等

  • 个人头像设置

总结

网上有很多人利用hexo把博客搭建得很好，发现了，感觉会很惊喜，就去研究他们是怎么做的。例如，如果大家都是用这个主题或者评论功能，先看看它们是什么，然后google它们的名字，扒一扒肯定会有很多资料的，先动手实践，再慢慢深入。