网站建站记录三

网站建站记录三

node.js

• node.js 简介

参考自七天学会NodeJS。

JS(Java Script)是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。

• node.js 安装

在nodejs.org上下载相应的node.js版本安装即可，windows下一般是.msi文件。安装过程很简单，跟平常装软件一样。

Hexo

• Hexo 简介

参考自Hexo官网。

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

• Hexo 安装

安装Hexo，必须先安装好node.js和git ，这两个软件在前面的记录中已经介绍过。
打开git bash,输入如下命令即可完成安装，安装过程比较慢，请耐心等待。

$ npm install -g hexo-cli

利用默认博客模板进行本地调试

在电脑上建立一个名为Hexo的文件夹，如E盘，在上一步安装好之后，输入如下命令，跳到对应文件夹、初始化、创建、启动服务。

cd e:\
hexo init
hexo g
hexo s

这里要注意一个问题，在git bash中安装好hexo后，不要关掉bash，而是直接在里面输入相关命令。如果是新建文件夹后，在文件夹git bash，在输入hexo命令是没效果的（网上教程是这样的，不知道为什么在我电脑上行不通）。

完成以上命令后，就会看到在Hexo文件夹创建了很多文件和文件夹。这里使用的主题是默认的lanscape。

打开浏览器，在地址栏里输入localhost:4000,就会看到下图的效果（里面的内容有变动过，基本的主题就是这个样子）

输入如下命令来了解常用的Hexo命令，很少,解释应该也很清楚吧。

推送主题到远端(github)

• 配置_config.yml

Hexo文件夹里有两个_config.yml,一个在Hexo文件夹下在，一个在对应的主题的文件夹下。这里配置的是Hexo文件夹下的，这个文件配置的信息主要是关于整个主页的标题，副标题，显示文章数，主题颜色等等各个方面。详细的到后面进行介绍。这里只是更改主题名字和部署的git地址。

更改主题名字，找到如下字段更改。

theme：landscape

更改部署github地址，找到deploy字段，修改如下。

deploy:
  type: git 
  repository: https://github.com/dawnminghuang/dawnminghuang.github.io #改成你自己的github pages地址
  branch: master

其中注意两点：一是type，以前是github，现在改成git了。二是repository，网上教程里用的是下面的，不过在我电脑又不行，不存在这个git。所以改用前面写的了，不过每次部署的时候都需要输入用户名和密码。

# repository: [email protected]:dawnminghuang/dawnminghuang.github.com.git

• 更新主题、生成并部署

这个主要包括两个过程：一是更新主题，到主题相应的目录下，推送到远端。输入的命令如下：

cd themes/landscape # 保证当前目录是Hexo目录
git pull

二是生成和部署，直接利用组合命令

hexo d -g

这时会要求输入github上账号和密码，输入即可。

访问你的github pages，就可以看到相应的网页。

更换主题

如果你觉的默认的主题缺少设计，页面设计不符合你口味，那么你可以去git clone一个别人的模板，然后重新生成、部署就可以了。
比如我的个人主页复制的是wuchong的是jacman，然后根据这个模板进行修改的。
进入到Hexo文件夹下，打开git bash，输入如下命令

git clone https://github.com/wuchong/jacman.git themes/jacman

这时就会在Hexo文件夹的thems下生成jacman的文件夹，里面包含jacman的主题所需要的文件。接下来就进行个人主页相关的配置。

模板的相关配置

模板的配置也是很重要的一部分，这个包括全局的_config.yml和thems里面的_config.yml。

• 全局的_config.yml配置

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Dawn  #网站标题
subtitle: To be a full stack developer #网站副标题
description: 技能 | 身体 | 心理 #网站描述，给搜索引擎用的，在生成html中的
author: dawnming #网站作者，在下方显示
language: zh-CN
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.dawnming.me #你的域名
root: / 
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
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
  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

# Disqus Disqus插件
disqus_shortname: dawnming

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: jacman

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/dawnminghuang/dawnminghuang.github.io
 # repository: [email protected]:dawnminghuang/dawnminghuang.github.com.git
  branch: master

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

#sitemap
sitemap:
  path: sitemap.xml

• themes中_config.yml的配置

##### Menu
menu:
  Home: /
  Archives: /archives
  About: /about
## you can create `tags` and `categories` folders in `../source`.
## And create a `index.md` file in each of them.
## set `front-matter`as
## layout: tags (or categories)
## title: tags (or categories)
## ---

#### Widgets
widgets: 
- category
- tag
- links
- tagcloud
#- douban
## provide seven widgets:category,tag,rss,archive,tagcloud,links,weibo,douban


#### RSS 
rss: /atom.xml ## RSS address.

#### Image
imglogo:
  enable: true ## display image logo true/false.
  src: img/logo.png## `.svg` and `.png` are recommended,please put image into the theme folder `/jacman/source/img`.
favicon: img/favicon.ico   ## size:32px*32px,`.ico` is recommended,please put image into the theme folder `/jacman/source/img`. 
apple_icon: img/jacman.jpg ## size:114px*114px,please put image into the theme folder `/jacman/source/img`.
author_img: img/author.jpg ## size:220px*220px.display author avatar picture.if don't want to display,please don't set this.
banner_img: img/banner.jpg ## size:1920px*200px+. Banner Picture
### Theme Color 
theme_color:
theme: '#2ca6cb'##the defaut theme color is blue

#### index post is expanding or not 
index:
  expand: true   ## default is unexpanding,so you can only see the short description of each post.
  excerpt_link: Read More  

close_aside: false  #close sidebar in post page if true
mathjax: false  #enable mathjax if true

### Creative Commons License Support, see http://creativecommons.org/ 
### you can choose: by , by-nc , by-nc-nd , by-nc-sa , by-nd , by-sa , zero
creative_commons: none

#### Author information
author:
  intro_line1:  "stay hungry . "## your introduction on the bottom of the page
  intro_line2:  "stay foolish ."  ## the 2nd line
  weibo:  ## e.g. wuchong1014 or 2176287895 for http://weibo.com/2176287895
  weibo_verifier:  ## e.g. b3593ceb Your weibo-show widget verifier ,if you use weibo-show it is needed.
  tsina:  ## e.g. 2176287895  Your weibo ID,It will be used in share button.
  douban: ## e.g. wuchong1014 or your id for https://www.douban.com/people/wuchong1014
  zhihu:  ## e.g. jark  for http://www.zhihu.com/people/jark
  email:  ## e.g. [email protected]
  twitter:## e.g. jarkwu for https://twitter.com/jarkwu
  github: ## e.g. wuchong for https://github.com/wuchong
  facebook:   ## e.g. imjark for https://facebook.com/imjark
  linkedin:   ## e.g. wuchong1014 for https://www.linkedin.com/in/wuchong1014
  google_plus:## e.g. "111190881341800841449" for https://plus.google.com/u/0/111190881341800841449, the "" is needed!
  stackoverflow:  ## e.g. 3222790 for http://stackoverflow.com/users/3222790/jark
## if you set them, the corresponding  share button will show on the footer

#### Toc
toc:
  article: true   ## show contents in article.
  aside: true ## show contents in aside.
## you can set both of the value to true of neither of them.
## if you don't want display contents in a specified post,you can modify `front-matter` and add `toc: false`.

#### Links
links:
  CSDN博客: http://blog.csdn.net/h2008066215019910120



#### Comment
# duoshuo_shortname:  ## e.g. wuchong   your duoshuo short name.
disqus_shortname: dawnming  ## e.g. wuchong   your disqus short name.

#### Share button
jiathis:
  enable: false ## if you use jiathis as your share tool,the built-in share tool won't be display.
  id:## e.g. 1889330 your jiathis ID. 
  tsina: ## e.g. 2176287895 Your weibo id,It will be used in share button.

#### Analytics
google_analytics:
  enable: true
  id:  UA-62650012-1  ## e.g. UA-46321946-2 your google analytics ID.
  site: dawnming.me ## e.g. wuchong.me your google analytics site or set the value as auto.
## You MUST upgrade to Universal Analytics first!
## https://developers.google.com/analytics/devguides/collection/upgrade/?hl=zh_CN
baidu_tongji:
  enable: false
  sitecode:  ## e.g. e6d1f421bbc9962127a50488f9ed37d1 your baidu tongji site code
cnzz_tongji:
  enable: false
  siteid:## e.g. 1253575964 your cnzz tongji site id

#### Miscellaneous
ShowCustomFont: true  ## you can change custom font in `variable.styl` and `font.styl` which in the theme folder `/jacman/source/css`.
fancybox: true## if you use gallery post or want use fancybox please set the value to true.
totop: true   ## if you want to scroll to top in every post set the value to true


#### Custom Search
google_cse: 
  enable: false
  cx:   ## e.g. 018294693190868310296:abnhpuysycw your Custom Search ID.
## https://www.google.com/cse/ 
## To enable the custom search You must create a "search" folder in '/source' and a "index.md" file
## set the 'front-matter' as
## layout: search 
## title: search
## ---
baidu_search: ## http://zn.baidu.com/
  enable: false
  id:   ## e.g. "783281470518440642"  for your baidu search id
  site: http://zhannei.baidu.com/cse/search  ## your can change to your site instead of the default site

tinysou_search: ## http://tinysou.com/
  enable: false
  id:  ## e.g. "4ac092ad8d749fdc6293" for your tiny search id

上面根据自己的需要进行更改，主要的更改的是几项

• 插件

一般显示在侧边栏的，需要的就添加，不要的进行注释就可以

• Imge

图片，图片的文件存储在Hexo\themes\jacman\source\img目录下，为了个性化点，当然要把里面的图片换成自己的。 下面用一个图展示每一个图片分别在页面的那个位置。（忽略author.jpg那张先天就二的照片~）

• author

显示在页面底部的一些信息。

• link

友情链接，显示在侧边栏里。

• comment

评论

• google_anglytics

去google上申请一个，将ID换成自己对应的。

添加disqus评论

添加评论的方式很简单。如果没有技术含量的拷贝别人的主题，那么在主题的相关文件中都已经配置好了。你只需要做两步就可以了。

• 注册disqus账号

在 disqus上注册一个账号，注册步骤如下。如果有google账号就直接用google账号登陆。

第一步如下:

第二步如下:

• 在配置文件里添加disqus插件

找到Hexo_config.yml文件，添加如下文本就可以

# Disqus Disqus插件
disqus_shortname: dawnming #改成上面一步注册的short name