未加星标

WordPress to Static Site Generator (Hugo) Migration and Deployment

字体大小 | |
[开发(php) 所属分类 开发(php) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

WordPress to Static Site Generator (Hugo) Migration and Deployment

TL;DR ― This article will show you how to migrate a simple WordPress website to a static site generator ( Hugo ) and host it for free on either Netlify or GitHub Pages .

GitHub Repository for this demo / Demo Site

Jump to

What isHugo?
WordPress to Static Site Generator (Hugo) Migration and Deployment
Hugo Logo

Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, ease of use, and configurability. Hugo takes a directory with content and templates and renders them into a full HTML website.

Hugo relies on Markdown files with front matter for metadata, and you can run Hugo from any directory. This works well for shared hosts and other systems where you don’t have a privileged account.

Hugo renders a typical website of moderate size in a fraction of a second. A good rule of thumb is that each piece of content renders in around 1 millisecond.

( https://github.com/gohugoio/hugo#overview )

What is GitHubPages?

GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.

( https://help.github.com/articles/what-is-github-pages/ )

What isNetlify?

Netlify is perfecting a unified platform that automates your code to create high-performant, easily-maintainable sites and web-apps.

( https://www.netlify.com/press/ )

Getting Started

To get started, you will need to create a new GitHub repository for your Hugo project.

Inside the repository, we will create a new hugo site.

Steps: Install Hugo: brew install hugo

2. Create a New Site in your repository’s directory:

hugo new site . --force

3. Add a Theme (the current theme I am using is called sustain ):

git clone https://github.com/nurlansu/hugo-sustain.git themes/hugo-sustain

4. Update the config.toml file (depending on your theme):

baseurl = "https://hugo-blog-demo.netlify.com/"
languageCode = "en-US"
title = "Hugo Site"
disqusShortname = ""
googleAnalytics = ""
theme = "hugo-sustain" [permalinks] post = "/:year/:month/:day/:slug" [params] avatar = "profile.png" author = "Author Name" description = "Describe your website" custom_css = [] custom_js = [] [params.social]
Github = "username"
Email = "email@example.com"
Twitter = "username"
LinkedIn = "username"
Stackoverflow = "username"
Medium = "username"
Telegram = "username" [[menu.main]] name = "blog" weight = 100 identifier = "blog" url = "/blog/" [[menu.main]] name = "projects" identifier = "projects" weight = 200 url = "/projects/" [[menu.main]] name = "resume" identifier = "resume" weight = 300 url = "/resume/"

5. Add Content:

hugo new blog/my-first-post.md

When you serve your website locally, you should be able to see the Hugo site up and running.

hugo server
WordPress to Static Site Generator (Hugo) Migration and Deployment
localhost:1313/blog WordPress Migration

You can skip to theWebsite Deployment sectionif you are not migrating a WordPress website to Hugo.

Exporting theContent

We will be the Jekyll Exporter WordPress plugin to migrate current WordPress content over to Hugo. This plugin converts all your posts, pages, images, and content on WordPress into files that will work with Hugo.

Now we can copy over the converted blog post files exported from the plugin into Hugo, inside /content/blog .

Keeping theImages

To keep any images, you can copy over the exported wp-content folder into the static folder in your Hugo project. Anything inside the static folder can be referenced relatively. Example: /wp-content/uploads/image.jpg

If you have any blog posts referencing these images, you can do a find a replace inside the Hugo project to replace your WordPress website’s absolute path with a relative path. Example: http://wordpress-domain.com/wp-content/uploads/image.jpg will be changed to /wp-content/uploads/image.jpg


WordPress to Static Site Generator (Hugo) Migration and Deployment
Migrated BlogPost Website Deployment

To host and deploy your Hugo website for free. You can either use Netlify or GitHub Pages .

Netlify

Steps to deploy using Netlify:

First signup for a Netlify account. Create a new site linked to your GitHub repository. Select your options and deploy.
WordPress to Static Site Generator (Hugo) Migration and Deployment

After you hit deploy, it should build and deploy to a Netlify subdomain. Netlify also comes with Continuous Deployment, depending on how you set it up. By default, every time you push to Github, Netlify builds the master branch of your repository and deploys to Netlify’s Content Delivery Networks (CDNs).

Example: each time a commit is pushed to the master branch of my repository Netlify builds and deploys to https://hugo-blog-demo.netlify.com/

Furthermore, you can add your own custom domain to Netlify.

GitHub Pages Steps to deploy using

本文开发(php)相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师

tags: Hugo,your,Netlify,hugo,blog,content,website,com
分页:12
转载请注明
本文标题:WordPress to Static Site Generator (Hugo) Migration and Deployment
本站链接:https://www.codesec.net/view/604993.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 开发(php) | 评论(0) | 阅读(11)