美文网首页
Hexo+Github创建博客

Hexo+Github创建博客

作者: 小子考驾照 | 来源:发表于2016-09-20 15:01 被阅读240次

    准备工具node.js和git

    安装node.js

    window童鞋点这里
    mac童鞋点这里
    linux童鞋点这里

    安装git

    window童鞋点这里
    mac童鞋点这里
    linux童鞋点这里

    用hexo创建博客

    下面的命令,你们可以在cmd中也可以用git中的git bash都可以,输入每个命令之后别忘了一个enter执行

    mkdir blog  创建一个博客文件夹
    cd blog   进入目录
    npm install hexo-cli -g(对这个文件夹全局安装依赖一次就够了,后面可以直接使用hexo相关的操作)
    hexo init(初始化hexo)
    hexo generate生成静态页面到public文件夹,等待deploy部署
    hexo server(测试页面) http://localhost:4000
    

    这一步就ok了,你可以到目录source/_posts看到md文件,这里就是我们以后要编辑的博客,当然不会md语法的请查看我的另一篇文章

    开始写博客吧

    新建文章:如hexo new "新建文章的标题"
    hexo new photo "标题" 生成一个带头图的文章,不过大可以不用,因为layout: photo经测试可以省略,直接写photos: 图片地址
    新建了之后,要查看写的结果,就用执行命令hexo server,之后访问本地回流地址http://localhost:4000

    部署的相关配置

    编辑配置文件:vi _config.yml

    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    
    # Site 网站信息
    title: 网站标题
    subtitle: 网站副标题
    description: 网站描述
    author: 网站作者名字
    language: #网站语言,默认是英语(en)
    timezone: #网站时区
    
    # URL 网站设置
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: seayxu.github.io #网站的地址
    root: / #网站的根目录,如果是子文件夹下,则填写子文件夹路径
    permalink: :year/:month/:day/:title/ #文章链接地址格式 
    permalink_defaults:
    
    # Directory 目录设置
    source_dir: source #资源文件夹,默认是source
    public_dir: public #公共文件夹,默认是public
    tag_dir: tags #标签文件夹,默认是tags
    archive_dir: archives #档案文件夹,默认是archives
    category_dir: categories #分类文件夹,默认是categories
    code_dir: downloads/code #代码文件夹,默认是downloads/code
    i18n_dir: :lang #国际化文件夹,默认跟language相同
    skip_render: [] #不需要渲染的文件夹或文件夹,放在[]中
    
    # Writing 文章写作选项
    new_post_name: :title.md # File name of new posts
    default_layout: post #默认布局模板
    titlecase: false # Transform title into titlecase
    external_link: true # Open external links in new tab
    filename_case: 0
    render_drafts: false
    post_asset_folder: false
    relative_link: false
    future: true
    highlight: #高亮显示
      enable: true #默认开启
      line_number: true #显示行号,默认开启
      auto_detect: false
      tab_replace:
      
    # Category & Tag 分类和标签
    default_category: uncategorized #默认分类名称
    category_map:
    tag_map:
    
    # Date / Time format #日期/时间格式
    ## Hexo uses Moment.js to parse and display date
    ## You can customize the date format as defined in
    ## http://momentjs.com/docs/#/displaying/format/
    date_format: YYYY-MM-DD #日期格式
    time_format: HH:mm:ss #时间格式
    
    # Pagination #分页信息
    ## Set per_page to 0 to disable pagination
    per_page: 10 #每页显示数量,设置为0表示不启用分页
    pagination_dir: page #分页文件夹名称
    
    # Extensions 扩展
    ## Plugins: https://hexo.io/plugins/ #插件
    ## Themes: https://hexo.io/themes/ #主题
    theme: landscape #主体名称
    feed:
      type: atom
      path: atom.xml
      limit: 20
        #type 表示类型, 是 atom 还是 rss2.
        #path 表示 Feed 路径
        #limit 最多多少篇最近文章
    sitemap:
      path: sitemap.xml
      #path 表示 Sitemap 的路径. 默认为 sitemap.xml.
    baidusitemap:
      path: baidusitemap.xml
    # Deployment 部署
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: git@github.com:xuywei/xuywei.github.io.git #github仓库地址
      branch: master # github分支
    

    部署到github

    创建github仓库:用户名.github.io 如:xuywei.github.io
    然后执行hexo deploy就自动提交.deploy_git的文件到部署配置的github仓库

    hexo generate生成静态页面(静态内容在public文件夹内,这个文件夹是以后发布到github中的文件)
    hexo clean删除public文件夹中的内容(其实并没有啊,大概是清理缓存的缘故)
    hexo deploy部署hexo
    

    部署的时候会提示没有发现git,使用npm install hexo-deployer-git --save安装git插件,再次重新部署就可以了

    总结

    1. 安装node.js和git
    2. 安装hexo
    npm install -g hexo
    
    1. 部署hexo
    mkdir blog
    cd blog
    hexo init
    

    执行之后会生成以下文件

    .deploy:执行hexo deploy命令部署到GitHub上的内容目录
    public:执行hexo generate命令,输出的静态网页内容目录
    scaffolds:layout模板文件目录,其中的md文件可以添加编辑
    scripts:扩展脚本目录,这里可以自定义一些javascript脚本
    source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
    _drafts:草稿文章
    _posts:发布文章
    themes:主题文件目录
    _config.yml:全局配置文件,大多数的设置都在这里
    package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮
    
    1. 创建博客
    hexo new "博客的文章名"
    hexo new page "比如about页面"
    
    1. 生成静态页面
    hexo clean先清除缓存
    hexo generate生成页面
    
    1. 本地发布
    hexo server可以输入127.0.0.1:4000打开你的博客
    
    1. 发布到github
    hexo deploy将public中的静态页面复制到.deploy文件夹中并提交到github
    
    1. 一些简易命令
    hexo命令缩写:
              hexo n:hexo new
              hexo g:hexo generate
              hexo s:hexo server
              hexo d:hexo deploy
    hexo命令组合:
              hexo deploy -g
              hexo server -g
    

    注意:命令不要随意组合,会没有效果

    1. 写博客的一些小细节


      博客的样式图
    layout: photo #这个属性是博客的样式,有一个头图样式,如上图
    title: test2 #标题
    date: 2016-09-20 13:55:04 #写作时间
    tags: [haha,toot,huhu] #多个标签
    photos: http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg #图片的地址
    description: 你对本页的描述--- #只是对文章的一个描述,点开文章不会再有
    

    相关文章

      网友评论

          本文标题:Hexo+Github创建博客

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