웹페이지 만들기, 무료 템플릿 사용하여 제작하기

1단계 . 무료 템플릿 페이지

링크 : https://themewagon.com/theme-price/free

워낙 맘에 드는 템플릿이 많았지만, 그중에서도 빨리 적용해 볼 수 있을 것을 찾았는데 100가지 테마를 한번에 모은 곳이 있었습니다. 이분 메인껄 해보고 싶어서 그대로 가져와 적용하였습니다.

JohnDoe - Free One Page Portfolio Website Bootstrap Template - ThemeWagon

단, 이전 글을 참조하여 nodejs로 웹서버를 구성했을 경우 바로 적용이 가능합니다.

Node JS ,express 패키지로 웹서버 구동하기

JohnDoe님의 템플릿을 다운받으면 100-template-list-1.0.zip 파일이 받아집니다. 압축을 풀고 이중에서 원하는 것을 하나 고르면 됩니다.

그 소스를 복사 해두었다가, nodejs 설치한 폴더에서 public 폴더에 가져다 넣으면 위와 같이 동일한 사이트가 뜹니다

 

이 다음이 매우 중요합니다.

2단계. express/index.js를 열어 아래와 같이 수정

/*!
 * express
 * Copyright(c) 2009-2013 TJ Holowaychuk
 * Copyright(c) 2013 Roman Shtylman
 * Copyright(c) 2014-2015 Douglas Christopher Wilson
 * MIT Licensed
 */

'use strict';

var express= require('./lib/express');

var app = express()

app.use(express.static('public'));

//특정 포트로 서버 오픈
app.listen(80, function() {
    console.log("start! express server on port 80")
})

app.get('/', function(req,res) {
    res.sendFile(__dirname + "/public/index.html")
})

// localhost:80/main 브라우저에 res.sendFile() 내부의 파일이 띄워진다.
app.get('/index', function(req,res) {
    res.sendFile(__dirname + "/public/index.html")
})

수정하는 이유는 css/js 등 index외에 기타 페이지가 등록(?)이 안되어 있어서 404 에러가 발생하기 때문입니다.

3단계. public/index.html 파일을 열어서 수정

기존 홈페이지에 들어가있던 본문 내용 수정 및 이미지 교체만 하면 됩니다. 참고로 무료 이미지 사이트는 픽사베이 🧡 https://pixabay.com/ko/ 를 사용부탁드립니다.

 

결과 : 적용한 사이트 비교 사진

 

기타

조금 더 수정이 필요하지만 오늘은 이걸로 엄청 만족합니다. 당장 서비스 로고를 제작해야 서비스 홈페이지를 만드는데 우선 개인 홈페이지 만든 것만으로도 만족해야겠습니다. 모든 개발을 틈틈히 하고있어 힘든 것 같습니다. 그래도 웹 사이트 해야지 하고 하루만에 거의 다 해서 다행이라고 생각합니다. 외부에서 접속하길 원한다면 아래 글도 참조 부탁드린다.

[알쓸신잡] 공유기 활용백서(IPTIME) , 파일 및 웹서버 기능

무료 사이트 제작에 도움 드리니 편히 댓글 부탁드립니다. 🙇🏻‍♀️ 🧡