博客网站的建立

2018-04-23 本文已影响0人 o_O小薯条

建立一个简单的博客网站

今年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给我发了一封邮件，如下所示：