이 글에서는 과학자와 엔지니어, 연구원, 박사 학생 등등을 위한 웹사이트를 만드는 방법을 소개합니다! 실험실, 연구실, 포트폴리오, 개인 홈페이지 등 트래픽이 아주 많지 않은 경우에 추천합니다.
거창하게 과학자까지도 안 가고 제가 이 웹 사이트를 만들고 배포한 방식입니다. 컴퓨터에 대한 지식이 거의 없어도 쉽게(?) 만들 수 있으며 시간도 많이 걸리지 않습니다.
비슷한 방식으로 웹을 구축해서 공부한 내용을 물리 공부한 내용을 열심히 올리는 분들도 계시더라구요.
1. GitHub에 가입하고 새 리포지토리 만들기
먼저 GitHub에 가입하고 새 리포지토리를 추가합니다. 이름은 자유롭게 정합니다. 리포지토리가 공개인지 비공개인지는 중요하지 않습니다.
저는 새로 만든 리포지토리의 이름은 “test”, 공개 여부는 비공개로 설정했습니다.
- Github란? (AI생성 답변)
GitHub는 여러 사람이 함께 일하며 소스 코드를 공유하고, 변경사항을 추적하며, 프로젝트를 관리할 수 있게 도와주는 도구입니다. 프로그래머들의 협업과 소프트웨어 작업을 위한 온라인 작업장 같은 곳이에요.
2. 원하는 테마 받기.
원하는 테마를 다운로드합니다. 다음은 제가 추천하는 테마입니다.
- My website: Zzo (Download)
- Academic by Wowchemy (Download) (Demo)
- Spark (Download) (Demo)
- Cupper (Download) (Demo)
제가 쓰는 Zzo 테마는 일단 기능이 많습니다!
Wowchemy는 Research Group, Academic Resume, Portfolio, Online Course 등 다양한 템플릿을 제공합니다. Copper도 인기 있고, Spark는 디자인이 좋습니다. 개인적으로 쓰는 사람을 많이 본 세 가지 테마입니다. 다른 좋은 템플릿도 많은데 어떤 것이든 좋습니다.
3. 압축 풀고 GitHub 리포지토리에 업로드하기
파일의 압축을 풀고 디렉토리에 있는 파일을 GitHub 리포지토리에 업로드합니다.
3.1 ’netlify.toml’ 파일이 없는 경우 생성합니다.
Academic 에는 이미 netlify 파일이 포함되어 있으므로 이 과정을 수행할 필요가 없습니다. Zzo 테마를 쓰는 분들은 아래 단계를 따라해 주세요.
Case) Zzo Theme
다음 디렉터리 안에 config.toml, netlify.toml 파일을 두 개 생성해야 합니다. “Add file” - “Create new file”를 클릭합니다.
참고) 이 홈페이지를 만들기 위해서 만든 리포지토리의 이름이 test입니다.
test/netlify.toml
[build]
publish = "exampleSite/public"
command = "cd exampleSite && hugo --gc --themesDir ../.."
[build.environment]
HUGO_VERSION = "0.93.3"
HUGO_THEME = "repo"
HUGO_BASEURL = "/"
test/exampleSite/netlify.toml
[build]
publish = "public"
command = "hugo --minify --gc"
[build.environment]
HUGO_VERSION = "0.87.0"
HUGO_BASEURL = "/"
test/exampleSite/config.toml
설정 파일입니다. 나의 환경에 맞게 작성합니다.
baseURL = "http://example.org/" # The URL of your site.
title = "Hugo Zzo Theme" # Title of your site
theme = "zzo" # Name of Zzo theme folder in `themes/`.
defaultContentLanguage = "en" # Default language to use (if you setup multilingual)
defaultContentLanguageInSubdir = true # baseURL/en/, baseURL/kr/ ...
hasCJKLanguage = true # Set `true` for Chinese/Japanese/Korean languages.
summaryLength = 70 # The length of a post description on a list page.
buildFuture = true # if true, we can use future date for talks page
copyright = "©{year}, All Rights Reserved" # copyright symbol: $copy; current year: {year}
timeout = 10000
enableEmoji = true
paginate = 13 # Number of items per page in paginated lists.
rssLimit = 100
enableGitInfo = false # When true, the modified date will appear on a summary and single page. Since GitHub info needs to be fetched, this feature will slow down to build depending on a page number you have
googleAnalytics = ""
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
hardWraps = true
unsafe = true
xHTML = true
[markup.highlight]
codeFences = true
lineNos = true
lineNumbersInTable = true
noClasses = false
[markup.tableOfContents]
endLevel = 3
ordered = false
startLevel = 2
[outputs]
home = ["HTML", "RSS", "JSON"]
[taxonomies]
category = "categories"
tag = "tags"
series = "series"
4. Netlify에 Github 리포지토리를 추가.
웹 배포를 위한 단계입니다. Netlify에 GitHub 계정을 사용해 로그인합니다(SSO).
Netlify는 ‘http://어쩌구.netlify.com/’ 도메인을 제공합니다. 다른 URL로 설정하고 싶은 경우, Godaddy 또는 Namecheap과 같은 도메인 호스팅 회사에서 도메인을 구매할 수 있습니다. 저는 GoDaddy에서 1년에 3불이 안되는 염가 URL을 샀습니다.
netlify.toml 및 config.toml과 같은 모든 필수 파일을 GitHub에 업로드하면 사이트가 배포되고 라이브 상태가 됩니다.
아래는 내용 수정없이 테스트용으로 만든 웹입니다.
testbysue.netlify.app
5. CMS 추가 (필수 아님) (forestry.io를 썼으나 서비스 종료로 Netlify CMS로 옮김)
리포지토리에서 마크다운 파일을 수정하여 웹 페이지의 콘텐츠를 변경할 수 있기 때문에 필수는 아닙니다. 마크다운 파일이 생성되면 자동으로 배포를 해줍니다.
조금 더 편하게 글을 작성하기 위해 CMS(콘텐츠 관리 시스템)를 쓸 수 있습니다. CMS를 통해 웹사이트에 포스팅을 하려면 forestry.io에서 GitHub 계정을 연결해서 썼으나.. 서비스를 종료하면서 Netlify CMS로 옮겨 갔습니다.
6. 댓글 기능 추가 (필수 아님)
저는 광고가 없어서 Utterances app을 설치해서 댓글 기능을 구현했습니다. Github 계정이 없으면 댓글을 쓸 수 없다는 단점이자 장점이 있습니다. 이외에도 페이스북 로그인을 했을 때 댓글을 달 수 있는 앱도 있습니다.
참고한 블로그를 링크합니다.
https://ansohxxn.github.io/blog/utterances/#-utterances-가-더-좋다고-생각하는-이유
