DasomOLI는 다솜돌이라구요~!DasomOLI의 개인적인 관심사를 모두 게으르게 다룹니다.theme

[WordPress] WordPress를 다른 서버로 이전하기

2020년 6월 11일2023년 3월 6일 다솜돌이 Leave a comment

기존에 쓰던 Raspberry pi 3의 OS 버전 업그레이드를 게을리 했더니 해당 버전이 php5까지만 지원해서 그런가 자꾸 누가 들어온다;; 근래 설치했던 php7을 지원하는 Raspberry pi 4 4GB 모델로 워드프레스 블로그를 이전한다.

워드프레스 컨텐츠 내보내기

wordpress 내보내기 도구로 모든 컨텐츠 내보내기

먼저, 기존 워드프레스에서 wordpress 내보내기 도구를 이용해 모든 컨텐츠를 다운로드 받는다: “대시보드” > “도구” > “내보내기” > “모든 컨텐츠” 선택 후 “내보내기 파일 다운로드”

내보낸 파일에서 site 경로 수정하기 (optional)

여기서 내가 예전에 했던 일로 나만 적용되는 게 있는데, 맨 처음에 티스토리에서 워드프레스로 이전할 때 블로그 도메인 이름을 wp.dasomoli.org로 썼던 적이 있다. 그래서 모든 그 때 이전했던 글들 안의 이미지 경로가 wp.dasomoli.org를 사용한채로 export되었다. 내려받은 xml 파일 안의 모든 “wp.dasomoli.org” 혹은 “wp-dasomoli-org” 를 “blog.dasomoli.org”와 “blog-dasomoli-org”로 바꿔주었다.

미디어 라이브러리 복사해두기

미디어 라이브러리도 옮기기 위해 wp-content 안의 uploads/ 디렉토리를 압축해서 이전할 서버로 복사한다.

/var/www/wordpress/wp-content# tar cvfz uploads.tgz uploads
/var/www/wordpress/wp-content# scp uploads.tgz dasomoli@192.168.0.x:/home/dasomoli/

옮긴 미디어 라이브러리의 이전될 서버에서의 DB 등록을 위해서 “Moving Media Library” 플러그인을 설치한 후, 내보내기 후 json파일을 저장한다.

미디어 라이브러리 json 파일 내의 site 경로 수정하기 (optional)

여기서도 역시 json 파일 내부의 모든 “wp.dasomoli.org”를 “blog.dasomoli.org”로 수정한다.

ads.txt 파일 복사하기 (optional)

ads.txt 파일도 있다면 복사해둔다.

/var/www/wordpress# scp ads.txt dasomoli@192.168.0.x:/home/dasomoli/

https 인증서 관련 파일 복사하기

https를 위한 letsencrypt 관련 파일도 압축해서 옮긴다.

/etc# tar cvfz letsencrypt.tgz letsencrypt
/etc# scp letsencrypt.tgz dasomoli@192.168.0.x:/home/dasomoli/

테마 추가 CSS 백업해두기

사용 중인 테마의 추가 CSS가 있다면, 해당 CSS 코드를 어딘가에 복사해두도록 한다: “테마 디자인” > “테마” > “사용자 정의하기” > “추가 CSS”

위젯 백업해두기

사용 중인 위젯들이 있다면, 해당 텍스트나 링크, 코드 등을 어딘가에 복사해두도록 한다: “테마 디자인” > “위젯”의 “Sidebar”

apache2 설정

새로 옮길 서버의 워드 프레스 경로는 이전 서버와 동일하게 “/var/www/wordpress”로 한다. 다음과 같이 이전 서버에서와 동일한 apache2의 site 설정 파일을 작성한다. https를 위한 Rewrite로 시작하는 마지막쯤의 주석 3줄은 지워도 무방하다.

# vi /etc/apache2/sites-available/blog.dasomoli.org.conf

<VirtualHost *:80>
        # The ServerName directive sets the request scheme, hostname and port that
        # the server uses to identify itself. This is used when creating
        # redirection URLs. In the context of virtual hosts, the ServerName
        # specifies what hostname must appear in the request's Host: header to
        # match this virtual host. For the default virtual host (this file) this
        # value is not decisive as it is used as a last resort host regardless.
        # However, you must set it for any further virtual host explicitly.
        ServerName blog.dasomoli.org

        <Directory /var/www/wordpress>
                Options FollowSymLinks
                AllowOverride All
                Require all granted
        </Directory>

        ServerAdmin dasomoli@gmail.com
        DocumentRoot /var/www/wordpress

        # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
        # error, crit, alert, emerg.
        # It is also possible to configure the loglevel for particular
        # modules, e.g.
        #LogLevel info ssl:warn

        ErrorLog ${APACHE_LOG_DIR}/blog_error.log
        CustomLog ${APACHE_LOG_DIR}/blog.access.log combined

        # For most configuration files from conf-available/, which are
        # enabled or disabled at a global level, it is possible to
        # include a line for only one particular virtual host. For example the
        # following line enables the CGI configuration for this host only
        # after it has been globally disabled with "a2disconf".
        #Include conf-available/serve-cgi-bin.conf
#RewriteEngine on
#RewriteCond %{SERVER_NAME} =blog.dasomoli.org
#RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

wordpress 설치

wordpress 내려받아 압축 해제하기

https://wordpress.org/ 에서 최신 버전의 wordpress의 .tar.gz 파일을 내려받아 새로 설치할 사이트의 /var/www/ 아래에서 압축을 해제한다. 현재는 5.4.1이다.

/var/www# tar xvfz wordpress-5.4.1.tar.gz

ads.txt 복사하기

ads.txt를 복사해온다.

/var/www/wordpress# cp ~dasomoli/ads.txt .

wordpress 디렉토리 아래 파일 owner와 권한 설정하기

/var/www/wordpress 디렉토리와 파일의 owner는 apache2를 실행하는 www-data로, 권한은 디렉토리는 755로, 파일은 644로 설정한다.

/var/www# chown -R www-data:www-data wordpress
/var/www# chmod 755 wordpress
/var/www# cd wordpress
/var/www/wordpress# find . -type d -exec chmod 755 {} \;
/var/www/wordpress# find . -type f -exec chmod 644 {} \;

phpmyadmin 설치

기본적으로 https://wordpress.org/support/article/how-to-install-wordpress/ 의 설치 방법을 따른다. 해당 가이드에서처럼 편의를 위해 phpmyadmin를 설치하자. [MySQL] phpmyadmin 설치 글의 절차를 따른다.

# apt-get install phpmyadmin

phpmyadmin은 내부 네트워크에서만 접속 가능하도록 만들자.

# vi /etc/apache2/conf-enabled/phpmyadmin.conf

아래처럼 Require ip 구문을 추가한다. “::1” 은 local interface, 즉 127.0.0.1과 같다. “192.168.0” 은 192.168.0.x 대역을 말한다.

<Directory /usr/share/phpmyadmin>
    Options SymLinksIfOwnerMatch
    DirectoryIndex index.php
    Require ip 192.168.0
    Require ip ::1

apache2를 reload한다.

# systemctl reload apache2

wordpress가 사용할 database와 user 추가 및 설정하기

phpmyadmin은 phpmyadmin에서 database를 추가하기 위해서 root 사용자로 로그인하려고 할 때 어려움을 겪는다면, [MySQL] phpmyadmin에서 root 사용자 사용 불가 시 사용자 추가 방법을 참고하자. “wordpress” database와 “wordpress” 사용자를 추가한다. “wordpress” 사용자는 “wordpress” database에 모든 권한을 갖도록 설정한다.

apache2에서 wordpress site enable

apache2의 아까 설정했던 site를 enable한다.

# a2ensite blog.dasomoli.org.conf

워드프레스 설치 페이지 접속해 설치하기

워드프레스 설치 URL wp-admin/install.php (예를 들면, http://blog.dasomoli.org/wp-admin/install.php) 에 접속한다. 설치가 끝나면 wp-config.php가 생성될 것이다. 파일 권한 문제가 있어 생성하지 못하는 경우, 브라우저에 나타난 wp-config.php를 복사해서 쉘에서 생성 후 붙여넣기 한다.

미디어 라이브러리 복구하기

아까 복사해뒀던 미디어 라이브러리 압축 파일(uploads.tgz)를 wp-content/ 아래에서 압축 해제한다.

/var/www/wordpress/wp-content# cp ~dasomoli/uploads.tgz .
/var/www/wordpress/wp-content# tar xvfz uploads.tgz

uploads 디렉토리 역시 owner를 www-data로, 디렉토리는 755, 파일은 644로 권한 설정을 해준다.

/var/www/wordpress/wp-content# chown -R www-data:www-data uploads
/var/www/wordpress/wp-content# find . -type d -exec chmod 755 {} \;
/var/www/wordpress/wp-content# find . -type f -exec chmod 644 {} \;

새로 설치한 워드프레스에 접속해서 “Moving Media Library”를 설치한 후, “가져오기”로 json파일을 선택해 미디어 파일들을 DB에 등록한다.

이제 아까 저장해뒀던 모든 contents의 xml 파일을 가져온다. 모두 잘 보이는지 확인한다.

워드프레스 고유 주소 설정 (optional)

나는 티스토리에서 이전할 때 설정했던대로 사용했던 고유주소를 postname으로 설정할 것이다. “대시보드” > “설정” > “고유주소” > “글 이름”을 선택하여 /%postname%/ 가 되도록 만든다.

.htaccess 만들기 (optional)

나의 경우는 무엇때문인지 .htaccess 파일이 생성이 안되었었는데, 이 경우 직접 만들어서 아래 내용을 붙여 넣어주면 된다.

/var/www/wordpress# vi .htaccess

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
</IfModule>

파일 owner와 권한주는 것을 잊지 말자.

/var/www/wordpress# chown www-data:www-data .htaccess
/var/www/wordpress# chmod 755 .htaccess

https 설정하기

letsencrypt.tgz을 /etc/에 복사한 후 압축을 해제한다.

/etc# cp ~dasomoli/letsencrypt.tgz .
/etc# tar xvfz letsencrypt.tgz

rewrite 모듈을 enable하고, php-imagick를 설치한다.

# a2enmod rewrite
# apt-get install php-imagick

letsencrypt를 위한 certbot을 설치한후, apache 설정을 위해 실행한다. 아래는 라즈베리파이인 경우이다.

# apt-get install python-certbot-apache
# certbot --apache

우분투 22.04의 경우 다음과 같다.

# apt install certbot python3-certbot-apache
# certbot --apache

기존 인증서를 유지하면서 설치하도록 하면 된다.

설치한 워드프레스에 접속해서 “설정” > “일반” > “워드프레스 주소 (URL)”와 “사이트 주소 (URL)”을 https:// 로 바꾼다.

테마 재설치하기

기존에 설치했던 테마를 다시 설치한다. 나는 현재 sparkling 테마를 사용하고 있다.

추가 CSS가 있다면, 다시 설정하자: “테마 디자인” > “테마” > “사용자 정의하기” > “추가 CSS” 에 기존 사이트의 추가 CSS를 복사 붙여넣기.

pre {
	font-family: 'Nanum Gothic Coding', monospace;
	tab-size: 8;
}

.main-content-area {
	width: 100%;
	margin: 0px;
}

@media (min-width:992px) {
  .main-content-inner {
	  width: 70%;
	  margin: 0px;
  }

  .widget-area {
  	width: 30%;
  }
}

위젯 복구하기

아까 백업해두었던 위젯 설정을 다시 설정한다.

[HTML5&CSS] Dark theme 만들기

2020년 6월 1일2020년 6월 1일 다솜돌이 Leave a comment

다크 테마를 만들기 위해 색상을 다뤄보자.

테마 내의 새로운 HTML element를 몇 개 알고 넘어가자.

pre (preformatted): HTML 파일 내에 whitespace를 포함하여 적힌 그대로 보여준다. 일반적으로 monospace font, 즉 고정폭 폰트로 보여준다.
abbr (abbreviation): acronym이나 abbreviation을 나타낸다. acronym element는 deprecated되었다. 그렇지만, 하위 호환성을 위해 포함된다.

새로운 CSS background properties도 몇 개 알고 넘어가자.

background-image: element의 배경 이미지. url()에 이미지 URL을 넣는다.
background-repeat: 배경 이미지를 어떻게 반복할지. 다음 값들을 사용할 수 있다.
- repeat: 모든 공간을 덮을만큼 반복한다. 잘릴 수 있다.
- space: 잘림 없이 가능한만큼 반복한다. 비율이 유지되고, 첫번째와 마지막 이미지 사이의 가장자리를 잡기 위한 여백이 공간을 채우기 위해서 바뀐다.
- round: 이미지가 늘어나거나 줄어들어서 공간을 채운다.
- no-repeat: 이미지가 반복되지 않는다.

색상 반전시키기

반대 색상을 찾기 위해서 https://www.colortools.net을 이용하자. Opposite Color Tool을 이용하면 반대 색상을 쉽게 얻을 수 있다. 반전시킨 색상을 각 element에 적용한다.

HSL function 사용하기

HSL function은 세가지 값으로 색을 만든다. Hue, Saturation, Lightness.

H는 색상(Hue)를 나타낸다. 색상환(color wheel)에서 각도를 나타낸다. degree로 나타내던가 또는 radian으로 지정한다. 단위 없이 쓰면 degree이고, 0이 pure red, 120이 pure green, 240이 pure blue이다.
S는 채도(Saturation)을 나타낸다. 100% saturation은 완전히 짙은 색, 0%는 완전히 흐린 색, 회색이다. 50%가 “normal” color이다.
L은 밝기(lightness)를 나타낸다. 100%는 하얀색, 0%는 검정색이 된다.

따라서 색상을 180 degree 돌리면 반대색이 된다. 회색을 반전시키고 싶을 때는 밝기를 뒤집으면 된다. 회색을 얻고 싶으면 채도를 0으로 바꾸면 된다. 여기서 grayscale을 바꾸고 싶으면 밝기를 바꾸면 된다.

CSS Invert Filter

filter: invert() 를 사용해서 뒤집을 수도 있다.

[Web] 웹 개발 시 유용한 사이트

2020년 5월 9일2020년 7월 31일 다솜돌이 Leave a comment

웹 개발 시 유용한 사이트들을 정리한다.

W3C Markup Validation Service: https://validator.w3.org/
Dynamic Dummy Image Generator: https://www.dummyimage.com
- https://dummyimage.com/300×300/000/fff&text=Product+Image+2 와 같은 URL로 dummy image를 얻을 수 있다. 300×300은 이미지 크기, 그 다음은 background color, 그 다음은 foreground color, &text= 다음에 넣고 싶은 텍스트를 넣으면 된다.
HTML5 Live standard: https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content
Lorem ipsum: https://loremipsum.io/
Color tools for webmaster: https://www.colortools.net/
- Opposite color tool: https://www.colortools.net/color_complementary.html
XAMPP (Apache + MariaDB + PHP + Perl): https://www.apachefriends.org/index.html

moniwiki 설치

2019년 7월 14일2020년 12월 4일 다솜돌이 2 Comments

글 정리할 때 익숙한 건 역시 moniwiki다. 다시 설치하려니 github로 옮겨가고, wikiseed 심는 것도 따로 프로젝트를 따로 뒀던데 다시 설치하는 절차를 정리한다.

설치하려는 디렉토리 아래(난 /var/www/)에서 git clone

[code]
git clone https://github.com/wkpark/moniwiki.git
chown -R www-data:www-data moniwiki
cd moniwiki/
git clone https://github.com/wkpark/moniwiki-wikiseed.git wikiseed
cd theme/
git clone https://github.com/wkpark/moniwiki-theme-paper.git paper
git clone https://github.com/wkpark/moniwiki-theme-bootstrap3.git bootstrap3
git clone https://github.com/wkpark/moniwiki-theme-publish.git publish
[/code]

브라우저에서 monisetup.php 접속

$sitename 설정
$admin_passwd 설정
$use_sectionedit 설정
“Sow wikiseed” 로 wiki seed 심기

추가로 config.php 에서 고치기

http://blog.dasomoli.org/240 참고

쉘에서 secure.sh 실행

[code]
sh secure.sh
[/code]

apache2 설정

/etc/apache2/sites-available/moniwiki.dasomoli.org.conf

[code]
<VirtualHost *:80>
# The ServerName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request’s Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
ServerName moniwiki.dasomoli.org

<Directory /var/www/moniwiki>
Options FollowSymLinks
AllowOverride None
Require all granted
</Directory>

ServerAdmin dasomoli@gmail.com
DocumentRoot /var/www/moniwiki

# Available loglevels: trace8, …, trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn

ErrorLog ${APACHE_LOG_DIR}/moniwiki_error.log
CustomLog ${APACHE_LOG_DIR}/moniwiki.access.log combined

# For most configuration files from conf-available/, which are
# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with “a2disconf”.
Include conf-available/serve-cgi-bin.conf
</VirtualHost>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
[/code]

moniwiki 디렉토리에 index.html 생성

/var/www/moniwiki/index.html

[code]
<html>
<head>
<meta http-equiv=”refresh” content=”0; url=./wiki.php”>
</head>
<body onload=”javascript:window.location=’./wiki.php'”>
Please follow <a href=”wiki.php”>this link</a>
</body>
</html>
[/code]

Moniwiki의 초기 설정

2010년 4월 23일2010년 4월 23일 다솜돌이 1 Comment

1. monisetup.php 에서 한 일.
1.1. Site 이름 설정

$sitename=’Wiki’;

1.2. 업로드 가능한 파일 확장자 추가.

$pds_allowed=”png|jpg|jpeg|gif|mp3|zip|tgz|gz|txt|css|exe|hwp|pdf|flv|alz|bmp|doc|xls|ppt|pptx|xlsx|docx|gul|gif|bz2″;

1.3. 테마 바꾸기

$theme=’azblue’;

1.4. 편집창 사이즈 좀더 길게..

$edit_rows=26;

1.5. 위지윅 에디터는 아직 불안정 한 것 같으니 Disable

$use_wikiwyg=0;

1.6. 부분 편집 가능하도록..

$use_sectionedit=1;

1.7. 로그인한 후에 글 편집 가능하도록..

$security_class=’needtologin’;

2. php 설정(/etc/php.ini)에서 upload를 위한 작업
2.1. 최대 업로드 파일 사이즈 조정

upload_max_filesize = 2048M

2.2. POST 방식으로 업로드하므로 POST data size 조정

post_max_size = 1024M

3. azblue 테마 수정(theme/azblue/theme.php)
3.1. 폭이 너무 좁으니 좀 넓게..

$_width=’80%’;

워드프레스 컨텐츠 내보내기

wordpress 내보내기 도구로 모든 컨텐츠 내보내기

내보낸 파일에서 site 경로 수정하기 (optional)

미디어 라이브러리 복사해두기

미디어 라이브러리 json 파일 내의 site 경로 수정하기 (optional)

ads.txt 파일 복사하기 (optional)

https 인증서 관련 파일 복사하기

테마 추가 CSS 백업해두기

위젯 백업해두기

apache2 설정

wordpress 설치

wordpress 내려받아 압축 해제하기

ads.txt 복사하기

wordpress 디렉토리 아래 파일 owner와 권한 설정하기

phpmyadmin 설치

wordpress가 사용할 database와 user 추가 및 설정하기

apache2에서 wordpress site enable

워드프레스 설치 페이지 접속해 설치하기

미디어 라이브러리 복구하기

워드프레스 고유 주소 설정 (optional)

.htaccess 만들기 (optional)

https 설정하기

테마 재설치하기

위젯 복구하기

이 글 공유하기:

이것이 좋아요:

색상 반전시키기

HSL function 사용하기

CSS Invert Filter

이 글 공유하기:

이것이 좋아요:

이 글 공유하기:

이것이 좋아요:

설치하려는 디렉토리 아래(난 /var/www/)에서 git clone

브라우저에서 monisetup.php 접속

추가로 config.php 에서 고치기

쉘에서 secure.sh 실행

apache2 설정

이 글 공유하기:

이것이 좋아요:

이 글 공유하기:

이것이 좋아요: