从零开始的个人网站的搭建记录(一)

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上

至此准备工作就完成了,后面开始正式的网站制作

最终运行效果

web1
posted @ 2020-01-11 11:04  一位神秘丐帮  阅读(201)  评论(0编辑  收藏  举报