美文网首页
博客网站的建立

博客网站的建立

作者: o_O小薯条 | 来源:发表于2018-04-23 13:24 被阅读0次

    建立一个简单的博客网站

    今年4月份就在mac下利用hexo搭建了一个博客,因换了一台电脑,项目丢失,需重新安装。

    整理一下安装流程:

    1.hexo是基于nodejs的,需安装nodejs,安装nodejs最好选择homebrew

    2.首先查看电脑是否安装ruby,因为homebrew安装依赖ruby

    3.安装顺序:homebrew---->nodejs---->hexo

    安装homebrew

    [plain] view plain copy

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  

    安装nodejs

    [plain] view plain copy

    brew install node  

    在安装nodejs过程中,提示如下警告:

    [plain] view plain copy

    You have Xcode 8 installed without the CLT;  

    根据提示进行安装

    安装hexo

    [plain] view plain copy

    sudo npm install -g hexo  

    创建文件夹

    [plain] view plain copy

    mkdir blog  

    cd blog  

    hexo init  

    此时blog文件下出现了很多文件和文件夹,如下图所示:

    生成一套静态网页

    [plain] view plain copy

    hexo generate /** 生成一套静态网页 **/  

    hexo server /** 在服务器上运行 **/  

    在浏览器上运行http://localhost:4000就能看到如下的网站首页:

    撰写博客

    进入终端,使用cd命令进入到有Hexo框架的目录里面,输入:

    [plain] view plain copy

    hexo new post "我的第一篇博客"  

    随后出现如下的消息:

    [plain] view plain copy

    INFO  Created: ~/blog/source/_posts/我的第一篇博客.md  

    证明创建文章成功,“我的第一篇博客”这个md文件会创建在source/_posts/的文件下。该md文件在自动生成时会带有一些属性:

    title:     定义了博文的标题

    date:   定义了创作博文的时间

    tags:   定义了博文的标签

    除了这个三个属性以外我们还可以扩展一些属性:

    update:  定义了最后修改的时间

    comments:定义能否评论此博文(默认为true)

    categories: 定义了博文的种类

    配置文件  --  _config.yml说明

    Hexo的每一个功能的配置文件都是_config.yml, 具体说明看下面的注解:

    [plain] view plain copy

    # Hexo Configuration  

    ## Docs: https://hexo.io/docs/configuration.html  

    ## Source: https://github.com/hexojs/hexo/  

    # Site                 ##修改以适应搜索引擎的收录  

    title: Hexo            ##定义网站的标题  

    subtitle:              ##定义网站的副标题  

    description:           ##定义网站的描述  

    author: jason jwl      ##定义网站的负责人  

    language:              ##定义网站的语言,默认zh-Hans  

    timezone:              ##定义网站的时区  

    # URL  

    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'  

    url: http://yoursite.com   ##定义网站访问的域名  

    root: /      ##定义所在Web文件夹在哪个目录  

    permalink: :year/:month/:day/:title/  ##定义时间格式  

    permalink_defaults:  

    # Directory  

    source_dir: source   ##定义从哪个文件夹获取博客资料  

    public_dir: public   ##定义生成静态网站到哪个文件夹  

    archive_dir: archives  

    category_dir: categories  

    code_dir: downloads/code  

    i18n_dir: :lang  

    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  ##定义每一页多少条博客  

    pagination_dir: page  

    # Extensions  

    ## Plugins: https://hexo.io/plugins/  

    ## Themes: https://hexo.io/themes/  

    theme: landscape  ##定义使用的主题  

    # Deployment  

    ## Docs: https://hexo.io/docs/deployment.html  

    deploy:  

      type:  

    注意:

    另外修改这些属性时,请注意格式,属性和值要空一个格,比如theme: landscape。

    本地同步github

    在github上new Repository,并命名为xxxxx.github.io(xxxxx是你github的账号名),然后把本地项目提交到github的远程项目。具体操作步骤可以参考我以前写的一篇博客:http://blog.csdn.net/jasonjwl/article/details/49682217。然后在浏览器上输入xxxxx.github.io就能访问自己的博客了。

    同步到github,发现网站访问不了。并且github给我发了一封邮件,如下所示:

    经测试不是主题的问题。

    个人建议不通过手动同步github,优先考虑通过修改_config.yml让hexo帮助我们同步github,方便快捷,配置如下所示:

    [plain] view plain copy

    deploy:  

      type: git  

      repo: https://github.com/xxx/xxx.github.io.git  

      branch: master  

      xxx为个人github的name  

    配置完后,运行 

    [plain] view plain copy

    hexo deploy  

    或者

    [plain] view plain copy

    hexo d  

    如出现以下的错误:

    [plain] view plain copy

    ERROR Deployer not found: git  

    请运行以下命令进行安装:

    [plain] view plain copy

    npm install hexo-deployer-git --save  

    再次运行hexo deploy。工程同步成功!

    当你增加新的文章或者插件时,可以通过以下三个命令进行同步操作:

    [plain] view plain copy

    hexo clean  

    hexo generate  

    hexo deploy  

    相关文章

      网友评论

          本文标题:博客网站的建立

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