개발자 프로필 페이지 (대충)만들기

https://profile.hegelty.space/

hegelty - Profile

 

템플릿 찾기

저는 프론트엔드를 할 줄 모릅니다!

그래도 HTML 프로그래밍, JS, CSS를 만지작거리는건 가능하기 때문에 이미 만들어진 웹사이트 템플릿을 가져와서 개조하는 식으로 페이지를 만들어 보겠습니다. 

 

 그래서 찾아낸 사이트가 바로 이건데 CC-BY로 템플릿을 제공해주는 사이트입니다.

https://html5up.net/

HTML5 UP

 

저는 hyperspace를 선택해서 다운로드했습니다.

 

배경색 바꾸기

우선 저는 검은색 사이트를 만들고 싶기 때문에 배경색을 지정하는 CSS를 찾아냅니다.

개발자 도구로 배경을 클릭한 후 Styles를 찾으면 main.css:3242에 배경색이 지정되어 있네요.

 

 

IDE에서 main.css를 열고 배경색을 원하는대로 수정해줍니다

 

마찬가지의 방법으로 사이드바와 스크롤해서 나오는 화면들까지 모두 색을 바꿔줬습니다.

 

 

인트로 수정하기

이제 적당히 인트로의 문구들을 수정해주고, Section three에 있던 icons 부분을 떼와서 그럴듯하게 붙여줍니다.

아이콘은 https://fontawesome.com/ 이곳에서 찾아서 사용했습니다.

 

 

그럴싸하게 만들어졌습니다!

 

메인 섹션 수정하기

- 소개 및 기술 스택

저는 인트로 -> 소개 및 기술 스택 -> 프로젝트 순으로 내용을 배치하고 싶어서 섹션 one과 two를 바꿔치기 해줬습니다.

간단하게 소개를 적어주고, features 클래스를 복사해서 기술 스택 또한 적어줬습니다.

 

 

기술 스택 뱃지는 https://img.shields.io 를 사용했습니다.

Shields.io | Shields.io

 

https://github.com/Ileriayo/markdown-badges 이곳에서 대부분의 뱃지를 찾을 수 있고, 저기에 없는 뱃지를 만들고 싶으시면 https://simpleicons.org/에서 아이콘을 찾은 후 아래와 같이 사용하시면 됩니다.

Simple Icons

GitHub - Ileriayo/markdown-badges: Badges for your personal developer branding, profile, and projects.

 

https://img.shields.io/badge/-{텍스트}-{색상 hex code}?style=for-the-badge&logo={아이콘 이름}&logoColor={로고 색상 hex code}

 

- 프로젝트

아까 빼뒀던 section one을 활용해서 프로젝트 소개를 만들어봅시다.

 

여긴 크게 건드릴게 없어요. 로딩되지 않은 이미지 위에 덧씌워지는 색이 보라색이라서 검은색으로 바꿔줬습니다.

 

이미지 부분을 지우면 이런식으로 표시할수도 있습니다.

 

- 마무리

 

쓸모없는 마지막 부분을 지우고, footer를 수정하면 끝입니다.

 

 

완성!

 

배포

Github Page를 이용해도 괜찮겠지만 그냥 내 라즈베리 파이에 올리도록 하겠습니다

적당한 위치에 파일들을 놓고 Nginx를 설정합니다.

server {
        server_name profile.hegelty.space;
        location / {
                root /home/hegelty/profile;
                index index.html;
        }
        listen 80;
}

 

그리고 nginx를 재시작해주면

sudo nginx -s reload

 

정상적으로 나오는것을 볼 수 있습니다.

 

- SSL

사실 정적 웹이라서 필요는 없겠지만...

주의 요함이 꼴받으니 SSL을 적용해줍시다.

 

저는 CertBot을 사용해서 DNS 인증서를 받도록 하겠습니다.

 

sudo certbot certonly -d "*.hegelty.space" --manual --preferred-challenges dns

 

저기의 문자열을 DNS TXT record에 넣습니다.

그리고 변경사항이 적용될때 까지 기다린 후 엔터를 치면

 

이렇게 인증서가 생성됩니다.

 

이제 nginx 설정을 수정합니다.

server {
        server_name profile.hegelty.space;
        location / {
                root /home/hegelty/profile;
                index index.html;
        }
        listen 443 ssl;
        ssl_certificate /etc/letsencrypt/live/hegelty.space/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/hegelty.space/privkey.pem;

}

server {
	if ($host = profile.hegelty.space) {
		return 301 https://$host$request_uri;
	}


	server_name profile.hegelty.space;
	listen 80;
	return 404;
}

http로 접근하면 자동으로 https로 바뀌고, ssl이 적용되도록 하였습니다.

 

sudo nginx -s reload

다시 수정사항을 적용해 주면

 

진짜 끝입니다.

ㅅㄱㅇ