从零开始的个人网站的搭建记录(一)
2020.01.09.22.52开始有想法去继续做一下我的个人网站,网站的目的其实一直有想好,想要做一个自己的博客网站;
不打算去买网上现成的装好博客环境的服务器,准备从云服务器开始;
准备工作
step1 服务器
买了一年的滴滴云服务器,68块还是蛮划算的。
上来不管三七二十一,Nodejs先安排上了。
- vim helloword.js
var http = require("http");
http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Nicolas_44's Web DEMO1");
response.end();
}).listen(80);
console.log("nodejs start listen 80 port!");
- node helloword.js
打印结果:Nicolas_44's Web DEMO1
step2 初始的配置
安装express
前面是使用html请求的一个网页,现在开始将是使用express的一个网站项目
- npm install --save express
创建路由文件?项目的入口
- vim road.js
var express = require('express');
var app = express();
app.set('port', process.env.PORT || 80);
app.use(express.static(__dirname + '/public'));
app.use(function(req, res, next){
res.status(404);
res.render('404');
});
app.use(function(err, req, res, next){
console.error(err.stack);
res.status(500);
res.render('500');
});
app.listen(app.get('port'), function(){
console.log( 'Express started on http://localhost:' +
app.get('port') + '; press Ctrl-C to terminate.' );
});
- 80端口是默认直接是ip地址
使用模板文件
- npm install --save express3-handlebars
安装模版框架之后,后面写代码就方便了!
Express 支持多种不同的视图引擎,它们有不同层次的抽象。Express 比较偏好的视图引擎是 Jade(因为它也是 TJ Holowaychuk 开发的),Jade 所采用的方式非常精简:你写的根本不像是 HTML,因为没有尖括号和结束标签,这样可以少敲好多次键盘。然后,Jade 引擎会将其转换成 HTML Jade 是非常吸引人的,但这种程度的抽象也是有代价的。如果你是一名前端开发人员,即便你实际上是用 Jade 编写视图,也必须理解 HTML,大多数前端开发人员都不喜欢他们主要的标记语言被抽象化处理
更形象一点的解释handlebars那就是
<!doctype html>
<html>
<head>
<title>Nicolas</title>
</head>
<body>
<header><img src="/img/logo.png" alt="Logo"></header>
{{{body}}}
</body>
</html>
上面代码中 {{{body}}} 之外的代码已经写好了,就相当于每次写一个新的页面,导航栏底栏已经写好了,写body就可以了
这段代码创建了一个视图引擎,并对Express进行了配置,将其作为默认的视图引擎。接下来创建views目录,在其中创建一个子目录layouts。如果你是一位经验丰富的Web开发人员,可能已经熟悉 布局的概念了(有时也被称为“母版页”)。在开发网站时,每个页面上肯定有一定数量的HTML是相同的,或者非常相近。在每个页面上重复写这些代码不仅非常繁琐,还会导致潜在的维护困境:如果你想在每个页面上做一些修改,那就要修改所有文件。布局可以解决这个问题,它为网站上的所有页面提供了一个通用的框架。
step3 版本控制
安装Git
- git --version
查看有没有安装git,没有安装自行百度安装git
进入项目目录init
- git init
一定要在项目根目录init
配置Git
- 进入./git文件夹
打开config文件,输入
[user]
name = "你的名字"
email = "...@..."
添加所有文件All
- git add -A
第一次是add all,以后可以单个文件添加
提交修改
- git commit -m "本次修改的内容"
push
- git push -u origin master
将本地的修改穿到git上
至此准备工作就完成了,后面开始正式的网站制作