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


    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
  • 相关阅读:
    wpf
    复联之程序员
    python批量重命名【截取文件名前六个字符 】
    xr报表调整
    jquery操作select取值赋值与设置选中[转]
    iframe 父页面与子页面之间的方法的相互调用【转】
    快速掌握Vue.js使用【转】
    解决非root用户使用docker的办法
    关于sentinel LDK加密war包实现应用加密的使用方法
    Windows安装Tomcat失败:Failed installing tomcat7 service
  • 原文地址:https://www.cnblogs.com/samanian/p/12179296.html
Copyright © 2020-2023  润新知