(16)打鸡儿教你Vue.js

作者: 魔王哪吒 | 来源:发表于2019-07-01 17:41 被阅读15次

    博客:
    Hexo搭建个性博客

    https://hexo.io/zh-cn/

    快速、简洁且高效的博客框架

    超快速度
    Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。

    支持 Markdown
    Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。

    一键部署
    只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。

    丰富的插件
    Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。

    npm install hexo-cli -g
    
    hexo init blog
    
    cd blog
    
    npm install
    
    hexo server
    

    安装hexo

    npm install hexo-cli -g
    
    初始化Hexo
    D:\> hexo init blog
    
    获取博客主题
    git clone https://github.com/WeicMa/Hexo-Theme-Life.git themes-life
    
    _config.yml 可称为站点配置文件
    
    编译命令:hexo g
    
    启动命令:hexo s
    
    _config.yml中配置Git
    
    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: '这里填写你自己的项目地址'
    root: '这里写项目名称'
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    
    安装自动部署发布工具:
    npm install hexo-deployer-git --save
    
    hexo clean && hexo g && hexo d
    

    文章直接放在/Hexo/source/_posts目录下

    什么是hexo?
    安装,git,node.js,hexo

    $ npm install -g hexo-cli
    

    安装 Git

    • Windows:下载并安装 git.

    安装 Node.js

    安装 Node.js 的最佳方式是使用 nvm

    安装 Hexo

    $ npm install -g hexo-cli
    
    image.png
    image.png image.png

    使用 git 将主题 clone 至你的 hexo 博客项目下的 themes 文件夹下

    cd themes && git clone https://github.com/Mrminfive/hexo-theme-skapp.git
    

    clone 完后将根目录下的 _config.yml 文件中的 theme 字段设置为 hexo-theme-skapp,同时安装对应 node 依赖:

    npm install --save hexo-autoprefixer hexo-filter-cleanup hexo-generator-feed hexo-generator-sitemap hexo-renderer-sass hexo-renderer-swig mamboer/lunr.js moment node-sass object-assign
    

    注意:如果安装失败可尝试用 cnpm 进行安装。另外,由于使用 nodejieba 分词库,所以 windows 下用户应提前安装好相应编译环境。操作如下:

    npm install -g windows-build-tools
    npm install -g node-gyp
    

    主题设置:

    编辑根 _config.yml 文件,将 language 设置为你想要的语言:
    
    language: zh-cn
    

    设置菜单
    编辑根 _config.yml 文件,将 menu 设置为如下:

    menu:
      home: / 
      archive: /archives
      about: /about
    

    主题默认的菜单项有:

    键值 设定值 显示文本(简体中文)

    home    home: / 首页
    archive archive: /archives  归档
    about   about: /about   关于
    search  search: /search 搜索页
    

    创建 about 页面:

    hexo new page about
    

    创建 search 页面:

    hexo new page search
    

    博客配置:

    # Site
    # 博客的标题
    title: MINFIVE
    
    # banner显示的子标题
    subtitle: MINFIVE BLOG
    
    # banner显示的简短介绍
    subtitle_desc: 日常学习与兴趣交流
    
    # seo关键字
    keywords: minfive, minfive blog, 前端博客, 前端, 程序员, 前端开发, 全栈开发, node.js, javascript
    
    # 博客介绍(同时用于seo)
    description: 日常学习与兴趣交流的个人博客
    
    # 个人介绍
    introduction: 不思量,自难忘!
    
    # 博客的favicon图标,支持本地及在线两种方式,本地请将图标放置于 themes/hexo-theme-skapp/source/img 目录下
    favicon_ico: https://blog.static.minfive.com/other/favicon.ico
    
    # 博客的左上角logo图标,支持本地及在线两种方式
    logo: http://oo12ugek5.bkt.clouddn.com/images/logo-text-white.png
    
    # 头像/二维码(用于显示在底部)二选一
    avatar: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png
    # qrcode: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png
    
    # 文章的默认封面
    default_cover: http://oo12ugek5.bkt.clouddn.com/images/default_cover.png
    
    # header 的背景图
    header_cover: https://blog.static.minfive.com/other/banner-bg.jpg
    
    # 404 页面的背景图
    error_page_bg: https://blog.static.minfive.com/other/dogs.jpg
    
    # 页面加载loading图标
    loader_img: https://blog.static.minfive.com/other/loader.gif
    
    # 站长信息
    author:
      name: 
      link: 
    # 用于页面 footer 的站长信息
    about:
      info: 本站是基于 Hexo 搭建的静态资源博客,主要用于分享日常学习、生活及工作的一些心得总结,欢迎点击右下角订阅 rss。
      address: Guangzhou, Guangdong Province, China
      email: 
    

    icon-email: 邮箱
    icon-rss: rss
    icon-in: linkedin
    icon-twitter: twitter
    icon-facebook: facebook
    icon-github: github
    icon-zhihu: 知乎
    icon-douban: 豆瓣
    icon-weibo: 微博
    icon-telegram: telegram

    https://github.com/Mrminfive/hexo-theme-skapp/blob/master/README-cn.md


    请点赞!因为你的鼓励是我写作的最大动力!

    官方微信公众号

    吹逼交流群:711613774

    吹逼交流群

    相关文章

      网友评论

        本文标题:(16)打鸡儿教你Vue.js

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