Ubuntu 20.04에서 Hexo로 블로그를 설치하고 만드는 방법
이 페이지에서
- 전제 조건
- 방화벽 구성\n
- Node.js 설치
- Hexo 설치
- Hexo 구성
- 테마 설치
- 게시물 작성 및 게시
- 플러그인 설치\n
- 테스트 서버
- Hexo 정적 파일 생성
- Nginx 설치 및 구성
- SSL 설치
- Hexo 업데이트
- Hexo 배포
- 결론
Hexo는 Node.js에 구축된 정적 블로그 프레임워크입니다. Hexo를 사용하면 Markdown 형식으로 게시물을 작성할 수 있습니다. 이러한 블로그 게시물은 미리 정의된 테마를 사용하여 처리되고 정적 HTML 파일로 변환됩니다.
정적 파일을 생성한다는 점에서 WordPress와 같은 일반적인 블로깅 소프트웨어와 다릅니다. WordPress는 취약성에 취약한 사이트를 다시 로드할 때마다 PHP 코드를 실행하여 동적으로 블로그를 로드합니다.
이 튜토리얼에서는 Hexo를 설치하고 이를 사용하여 Ubuntu 20.04 기반 서버에 블로그를 만드는 방법을 배웁니다.
전제 조건
-
Ubuntu 20.04 based server with a non-root user with sudo privileges.
-
Git should be installed. If you don't have git installed, you can do it via following commands.
$ sudo apt install git $ git config --global user.name "Your Name" $ git config --global user.email "" -
An account on Github.
방화벽 구성
Ubuntu 20.04에는 기본적으로 Uncomplicated Firewall(UFW)이 함께 제공됩니다. 그렇지 않은 경우 먼저 설치하십시오.
$ sudo apt install ufw
SSH 포트를 활성화합니다.
$ sudo ufw allow "OpenSSH"
방화벽을 활성화하십시오.
$ sudo ufw enable
Hexo 서버에서 사용하는 포트 4000을 활성화합니다.
$ sudo ufw allow 4000
또한 나중에 필요할 HTTP 및 HTTPS 포트를 엽니다.
$ sudo ufw allow http
$ sudo ufw allow https
방화벽 상태를 확인하십시오.
$ sudo ufw status
Status: active
To Action From
-- ------ ----
OpenSSH ALLOW Anywhere
80/tcp ALLOW Anywhere
4000 ALLOW Anywhere
443/tcp ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
80/tcp (v6) ALLOW Anywhere (v6)
4000 (v6) ALLOW Anywhere (v6)
443/tcp (v6) ALLOW Anywhere (v6)
Node.js 설치
Hexo는 Node.js를 기반으로 하므로 먼저 설치해야 합니다.
다음 명령을 실행하여 Node.js 리포지토리를 추가합니다.
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
Node.js를 설치합니다.
$ sudo apt-get install nodejs
제대로 설치되었는지 확인합니다.
$ node --version
v14.15.0
헥소 설치
다음 명령을 실행하여 Hexo 패키지를 설치합니다.
$ sudo npm install hexo-cli -g
-g 매개변수는 hexo-cli 패키지를 전역적으로 설치하여 선택한 디렉토리에 Hexo 블로그를 설치할 수 있도록 합니다.
Hexo를 설치할 디렉토리를 생성합니다.
$ sudo mkdir -p /var/www/hexo
필요한 권한 및 소유권을 설정합니다.
$ sudo chown -R $USER:$USER /var/www/hexo
$ sudo chmod -R 755 /var/www/hexo
다음으로 Hexo 블로그에 필요한 파일을 초기화하고 설정해야 합니다. 이렇게 하려면 방금 만든 디렉터리로 전환합니다.
$ cd /var/www/hexo
Hexo 블로그를 초기화합니다.
$ hexo init
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
added 185 packages from 430 contributors and audited 191 packages in 6.47s
14 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
INFO Start blogging with Hexo!
헥소를 설치합니다.
$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for : wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 5 packages from 1 contributor and audited 191 packages in 1.567s
14 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
이제 디렉토리 구조를 확인할 수 있습니다.
$ ls
_config.yml node_modules package-lock.json package.json scaffolds source themes
_config.yml 파일은 Hexo 블로그에 대한 구성을 보유합니다. 대부분의 블로그 설정은 여기에서 변경할 수 있습니다.
node_modules 디렉토리에는 Hexo가 필요로 하는 모든 패키지와 의존하는 패키지가 들어 있습니다.
package.json 파일에는 Hexo가 필요로 하는 모든 패키지와 버전 번호 목록이 포함되어 있습니다.
package-lock.json 파일은 Hexo 패키지를 설치하거나 변경할 때마다 npm에 의해 자동으로 생성됩니다. 여기에는 설치되거나 변경된 패키지 및 버전에 대한 정보가 포함됩니다.
scaffolds 디렉토리에는 블로그 게시물과 페이지의 기반이 될 템플릿이 포함되어 있습니다.
source 디렉토리에는 웹에 게시되는 HTML/CSS 형식의 실제 사이트 콘텐츠가 포함되어 있습니다. _(밑줄) 접두사가 붙은 폴더나 파일은 _posts 폴더를 제외하고 Hexo에서 무시됩니다. 지금은 아무 것도 작성하거나 게시하지 않았기 때문에 디렉토리가 비어 있습니다.
themes 디렉토리에는 블로그 테마가 포함되어 있습니다.
Hexo 구성
편집을 위해 _config.yml 파일을 엽니다.
$ nano _config.yml
Site 파일의 섹션을 확인하십시오.
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''
옵션은 매우 자명합니다. 원하는 경우 사이트 이름을 변경하고 부제를 설정하십시오. 사이트에 대한 설명과 사이트를 설명하는 몇 가지 키워드를 추가합니다. 사이트의 작성자 이름과 시간대를 변경하십시오.
그런 다음 파일의 URL 섹션을 확인하십시오.
# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://example.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks
사이트의 URL을 도메인 이름으로 변경합니다. 나중에 SSL을 설치하므로 URL에 HTTPS를 사용해야 합니다.
사이트 URL이 각 페이지의 끝에 index.html을 표시하지 않도록 하려면 trailing_index 및 trailing_html 옵션을 모두 변경할 수 있습니다. false로.
켜야 하는 설정이 몇 가지 더 있습니다.
default_layout 변수 값을 post에서 draft로 변경합니다. 이렇게 하면 새 게시물이 초안으로 생성되므로 게시물이 블로그에 나타나기 전에 게시해야 합니다.
post_asset_folder 변수의 값을 true로 변경합니다. 이렇게 하면 모든 게시물에 대한 단일 이미지 폴더 대신 각 게시물에 대한 개별 이미지 폴더를 가질 수 있습니다.
Ctrl+X를 누르고 메시지가 표시되면 Y를 입력하여 파일을 저장합니다.
테마 설치
Hexo는 Landscape라는 기본 테마와 함께 제공됩니다. 테마 페이지에서 사용할 수 있는 다른 Hexo 테마를 설치하여 다른 테마로 전환할 수 있습니다.
모든 Hexo 테마는 Github를 통해 사용할 수 있으므로 테마 Github 리포지토리를 복제해야 합니다.
튜토리얼에서는 Next 테마를 설치합니다. Hexo 디렉토리로 전환하고 테마 Github 리포지토리를 themes 디렉토리에 복제합니다.
$ cd /var/www/hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
테마를 Landscape에서 Next로 변경하려면 /var/www/hexo/_config.yml 파일을 변경하십시오.
$ nano _config.yml
theme 변수를 변경하여 테마를 전환합니다.
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
/var/www/hexo/themes/next/_config.yml 파일을 수정하여 테마 설정을 변경할 수 있습니다.
게시물 작성 및 게시
첫 게시물을 작성할 시간입니다.
$ hexo new first-post
INFO Validating config
INFO Created: /var/www/hexo/source/_drafts/first-post.md
편집을 위해 새 게시물을 엽니다.
$ nano ./source/_drafts/first-post.md
모든 게시물에는 머리말이 설정되어 있어야 합니다. Front-matter는 게시물 제목, 게시 날짜, 카테고리, 태그 등과 같은 필수 세부 정보를 구성하는 JSON 또는 YAML의 짧은 블록입니다. 기본 데이터를 올바른 옵션으로 바꿉니다.
title: Howtoforge's First Post
tags:
- test
categories:
- Hexo
comments: true
date: 2020-11-14 00:00:00
---
## Markdown goes here.
**This is our first post!**
게시물에 이미지를 삽입하려면 게시물에 다음 코드를 추가하세요.
{% asset_img "example.jpg" "This is an example image" %}
그런 다음 example.jpg 파일을 첫 번째 게시물의 모든 이미지를 검색할 \\source\\_posts irst-post 디렉토리에 복사합니다.
게시물 작성을 마친 후 프롬프트가 표시되면 Ctrl+X를 누르고 Y를 입력하여 파일을 저장합니다.
다음으로 게시물을 게시합니다.
$ hexo publish first-post
INFO Validating config
INFO Published: /var/www/hexo/source/_posts/first-post.md
이 게시물은 블로그를 호스팅하면 표시됩니다.
플러그인 설치
Hexo에는 설치할 수 있는 수백 개의 플러그인이 있습니다. 용도에 따라 하나 이상의 플러그인을 설치할 수 있습니다.
모든 Hexo 플러그인은 Node.js 패키지이며 설치 및 구성 세부 정보를 찾을 수 있는 Github에서 호스팅됩니다.
튜토리얼에서는 hexo-filter-nofollow 플러그인을 설치합니다.
먼저 hexo 디렉토리에 있는지 확인한 다음 플러그인을 설치하십시오.
$ cd /var/www/hexo
$ npm i hexo-filter-nofollow --save
편집을 위해 Hexo 구성 파일을 엽니다.
$ sudo nano _config.yml
파일 끝에 다음 코드를 붙여넣습니다.
nofollow:
enable: true
field: site
exclude:
- 'exclude1.com'
- 'exclude2.com'
활성화 옵션은 플러그인을 활성화합니다. field 옵션은 site가 전체 사이트의 외부 링크에 nofollow 속성을 추가하고 post가 nofollow 속성만 추가하는 플러그인의 범위를 정의합니다. 게시물의 링크. exclude 옵션은 nofollow 속성이 추가되지 않는 도메인을 허용 목록에 추가합니다.
테스트 서버
Hexo는 기본 웹 서버와 함께 제공됩니다. 게시물이 게시되었으므로 이제 Hexo 테스트 서버를 시작할 시간입니다.
$ hexo server
이제 브라우저에서 URL http://yourserverIP:4000을 실행할 수 있으며 다음 페이지가 표시됩니다.
터미널에서 Ctrl + C를 눌러 서버를 종료합니다.
Hexo 정적 파일 생성
Hexo의 테스트 서버는 정적 파일뿐만 아니라 동적으로 블로그를 제공할 수 있습니다. 위의 명령은 블로그를 동적으로 제공했습니다.
Hexo 블로그를 공개적으로 제공하는 방법에는 여러 가지가 있습니다. 튜토리얼에서는 Nginx 서버를 사용하여 Hexos 정적 파일을 제공합니다.
다음 명령을 실행하여 정적 파일을 생성하십시오.
$ hexo generate
위의 명령은 /var/www/hexo/public 폴더에 저장된 정적 파일을 생성합니다. Nginx 서버를 사용하여 이 폴더의 파일을 제공합니다.
Nginx 설치 및 구성
Nginx 서버를 설치합니다.
$ sudo apt install nginx
Nginx용 Hexo 구성 파일을 생성하고 엽니다.
$ sudo nano /etc/nginx/sites-available/hexo.conf
다음 코드를 붙여넣습니다.
server {
server_name hexo.example.com;
root /var/www/hexo/public;
index index.html index.htm;
listen 443 ssl http2;
listen [::]:443 ssl http2;
ssl_certificate /etc/letsencrypt/live/hexo.example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/hexo.example.com/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_session_timeout 1d;
ssl_session_cache shared:MozSSL:10m; # about 40000 sessions
ssl_session_tickets off;
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES25> ssl_prefer_server_ciphers off;
ssl_dhparam /etc/ssl/certs/dhparam.pem;
location / {
try_files $uri $uri/ =404;
}
}
server {
if ($host = hexo.example.com) {
return 301 https://$host$request_uri;
}
server_name hexo.example.com;
listen 80;
listen [::]:80;
return 404;
}
Ctrl+X를 누르고 메시지가 표시되면 Y를 입력하여 파일을 저장합니다.
구성을 활성화합니다.
$ sudo ln -s /etc/nginx/sites-available/hexo.conf /etc/nginx/sites-enabled/
편집을 위해 /etc/nginx/nginx.conf 파일을 엽니다.
$ sudo nano /etc/nginx/nginx.conf
include /etc/nginx/conf.d/*.conf 줄 앞에 다음 줄을 붙여넣습니다.
server_names_hash_bucket_size 64;
변수 types_hash_max_size의 값을 2048에서 4096으로 변경합니다.
types_hash_max_size 4096;
Ctrl + X를 눌러 편집기를 닫고 파일을 저장하라는 메시지가 표시되면 Y를 누릅니다.
구성에 구문 오류가 없는지 테스트하십시오.
$ sudo nginx -t
문제가 없으면 Nginx 서버를 다시 시작합니다.
$ sudo systemctl restart nginx
SSL 설치
hexo 블로그에 Lets Encrypt 서비스를 사용하여 SSL을 설치할 때입니다.
이를 위해 Certbot을 설치합니다.
$ sudo apt install certbot
Certbot 프로세스를 방해하므로 Nginx를 중지하십시오.
$ sudo systemctl stop nginx
인증서를 생성합니다. 또한 DHParams 인증서를 생성해야 합니다.
$ sudo certbot certonly --standalone -d hexo.yourdomain.com --preferred-challenges http --agree-tos -n -m --keep-until-expiring
$ sudo systemctl start nginx
$ sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048
또한 SSL을 자동으로 갱신하기 위해 cron 작업을 설정해야 합니다. crontab 편집기를 열려면 다음 명령을 실행합니다.
$ sudo crontab -e
no crontab for root - using an empty one
Select an editor. To change later, run 'select-editor'.
1. /bin/nano <---- easiest
2. /usr/bin/vim.basic
3. /usr/bin/vim.tiny
4. /bin/ed
Choose 1-4 [1]: 1
위의 명령은 Crontab 편집기를 엽니다. 처음 실행하는 경우 Cron 작업을 편집하기 위한 편집기를 선택하라는 메시지가 표시됩니다. Nano 편집기에 대해 1을 선택합니다.
하단에 다음 줄을 붙여넣습니다.
25 2 * * * /usr/bin/certbot renew --quiet --pre-hook “systemctl stop nginx” --post-hook “systemctl start nginx”
위의 크론 작업은 매일 오전 2시 25분에 certbot을 실행합니다. 원하는 것으로 변경할 수 있습니다.
Ctrl + X를 누르고 메시지가 표시되면 Y를 입력하여 파일을 저장합니다.
헥소 업데이트
Hexo 폴더로 전환합니다.
$ cd /var/www/hexo
주요 Hexo 버전으로 전환하는 경우 package.json 파일을 업데이트해야 합니다. 편집을 위해 엽니다. 마이너 버전으로 업데이트하기 위한 업데이트 명령으로 바로 건너뛸 수 있습니다.
$ nano package.json
dependencies 섹션에서 다음 줄을 변경합니다.
"hexo": "^5.0.0",
향후 출시될 때마다 값 5.0.0을 다음 버전으로 변경하십시오. 예를 들어 Hexo 6.0이 나왔다면 다음과 같이 변경합니다.
"hexo": "^6.0.0",
Ctrl + X를 누르고 메시지가 표시되면 Y를 입력하여 파일을 저장합니다.
다음 명령을 실행하여 hexo를 업데이트합니다.
$ npm update
Hexo 배포
Hexo는 서버에서 직접 호스팅할 수 있을 뿐만 아니라 Git, Netlify, Vercel, Heroku, OpenShift 및 기타 다양한 방법에 직접 배포할 수도 있습니다.
대부분의 배포 플러그인은 플러그인을 설치해야 합니다. 튜토리얼에서는 Hexos 배포를 Netlify로 설정합니다. Netlify에 배포하려는 경우 Netlify가 무료 SSL과 함께 제공되므로 Nginx 및 SSL과 관련된 단계를 따를 필요가 없습니다.
Netlifys 사이트는 일반적으로 Git 리포지토리에서 배포됩니다. 그러나 우리의 목적을 위해 CLI 도구를 사용하여 정적 사이트를 Netlify에 직접 게시할 것입니다.
Netlify CLI를 설치합니다.
$ sudo npm install netlify-cli -g
CLI 도구가 설치되었는지 확인할 수 있습니다.
$ netlify --version
netlify-cli/2.68.5 linux-x64 node-v14.15.0
Netlify에 로그인합니다.
$ netlify login
Logging into your Netlify account...
Opening https://app.netlify.com/authorize?response_type=ticket&ticket=dfb575d97d07213c9cf73848c8d19e90
You are now logged into your Netlify account!
Run netlify status for account details
To see all available commands run: netlify help
브라우저의 터미널에서 로그인을 복사하고 Netlify 계정에 로그인하여 인증하십시오.
다음 명령을 사용하여 로그인 여부를 확인할 수 있습니다.
$ netlify status
???????????????????????
Current Netlify User ?
???????????????????????
Name: Your Name
Email:
Teams:
Your Team's team: Collaborator
Hexos 공개 디렉터리로 전환합니다.
$ cd /var/www/hexo/public
Netlify에 사이트를 배포합니다.
$ netlify deploy
This folder isn't linked to a site yet
? What would you like to do? + Create & configure a new site
? Team: Navjot Singh's team
Choose a unique site name (e.g. isnt-yourname-awesome.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): Howtoforge
Site Created
Admin URL: https://app.netlify.com/sites/Howtoforge
URL: https://Howtoforge.netlify.app
Site ID: 986c931c-3f06-40a1-a89b-59621f337c18
Please provide a publish directory (e.g. "public" or "dist" or "."):
/var/www/hexo/public
? Publish directory /var/www/hexo/public
Deploy path: /var/www/hexo/public
Deploying to draft URL...
? Finished hashing 37 files
? CDN requesting 9 files
? Finished uploading 9 assets
? Deploy is live!
Logs: https://app.netlify.com/sites/howtoforge/deploys/5fb0c9b806e72eb9c5f073c8
Website Draft URL: https://5fb0c9b806e72eb9c5f073c8--howtoforge.netlify.app
If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
화살표 키로 선택하여 새 사이트를 만들고 사이트 이름을 입력합니다. 현재 디렉터리를 참조하는 배포할 디렉터리로 .를 입력합니다.
초안 URL이 제공됩니다. URL을 복사하여 브라우저에 로드합니다. 모든 것이 괜찮아 보이면 다음 명령을 실행하여 프로덕션 배포를 수행합니다.
$ netlify deploy --prod
이제 귀하의 사이트가 활성화되어야 합니다. Netlify 설정에서 사용자 지정 도메인을 추가하여 실제 사이트를 가리킬 수 있습니다.
새 게시물을 게시하고 새 파일을 생성할 때마다 Hexos 기본 디렉터리에서 다음 명령을 실행하여 변경 사항을 Netlify에 배포합니다.
$ netlify deploy --dir ./public --prod
결론
이것으로 Ubuntu 20.04 기반 서버에서 Hexo Blog 프레임워크를 사용하여 블로그를 설치하고 생성하는 튜토리얼을 마칩니다. 질문이 있으시면 아래 의견에 게시하십시오.