From 28d94c9bbc925504efa2580efce567433eb300f6 Mon Sep 17 00:00:00 2001 From: Xingyu Wang Date: Tue, 3 Sep 2019 23:20:37 +0800 Subject: [PATCH] TSL --- ...90401 Build and host a website with Git.md | 226 ------------------ ...90401 Build and host a website with Git.md | 223 +++++++++++++++++ 2 files changed, 223 insertions(+), 226 deletions(-) delete mode 100644 sources/tech/20190401 Build and host a website with Git.md create mode 100644 translated/tech/20190401 Build and host a website with Git.md diff --git a/sources/tech/20190401 Build and host a website with Git.md b/sources/tech/20190401 Build and host a website with Git.md deleted file mode 100644 index 610b7b555a..0000000000 --- a/sources/tech/20190401 Build and host a website with Git.md +++ /dev/null @@ -1,226 +0,0 @@ -[#]: collector: (lujun9972) -[#]: translator: (wxy) -[#]: reviewer: ( ) -[#]: publisher: ( ) -[#]: url: ( ) -[#]: subject: (Build and host a website with Git) -[#]: via: (https://opensource.com/article/19/4/building-hosting-website-git) -[#]: author: (Seth Kenlon https://opensource.com/users/seth) - -Build and host a website with Git -====== -Publishing your own website is easy if you let Git help you out. Learn -how in the first article in our series about little-known Git uses. -![web development and design, desktop and browser][1] - -[Git][2] is one of those rare applications that has managed to encapsulate so much of modern computing into one program that it ends up serving as the computational engine for many other applications. While it's best-known for tracking source code changes in software development, it has many other uses that can make your life easier and more organized. In this series leading up to Git's 14th anniversary on April 7, we'll share seven little-known ways to use Git. - -Creating a website used to be both sublimely simple and a form of black magic all at once. Back in the old days of Web 1.0 (that's not what anyone actually called it), you could just open up any website, view its source code, and reverse engineer the HTML—with all its inline styling and table-based layout—and you felt like a programmer after an afternoon or two. But there was still the matter of getting the page you created on the internet, which meant dealing with servers and FTP and webroot directories and file permissions. While the modern web has become far more complex since then, self-publication can be just as easy (or easier!) if you let Git help you out. - -### Create a website with Hugo - -[Hugo][3] is an open source static site generator. Static sites are what the web used to be built on (if you go back far enough, it was _all_ the web was). There are several advantages to static sites: they're relatively easy to write because you don't have to code them, they're relatively secure because there's no code executed on the pages, and they can be quite fast because there's no processing aside from transferring whatever you have on the page. - -Hugo isn't the only static site generator out there. [Grav][4], [Pico][5], [Jekyll][6], [Podwrite][7], and many others provide an easy way to create a full-featured website with minimal maintenance. Hugo happens to be one with GitLab integration built in, which means you can generate and host your website with a free GitLab account. - -Hugo has some pretty big fans, too. For instance, if you've ever gone to the Let's Encrypt website, then you've used a site built with Hugo. - -![Let's Encrypt website][8] - -#### Install Hugo - -Hugo is cross-platform, and you can find installation instructions for MacOS, Windows, Linux, OpenBSD, and FreeBSD in [Hugo's getting started resources][9]. - -If you're on Linux or BSD, it's easiest to install Hugo from a software repository or ports tree. The exact command varies depending on what your distribution provides, but on Fedora you would enter: - -``` -$ sudo dnf install hugo -``` - -Confirm you have installed it correctly by opening a terminal and typing: - -``` -$ hugo help -``` - -This prints all the options available for the **hugo** command. If you don't see that, you may have installed Hugo incorrectly or need to [add the command to your path][10]. - -#### Create your site - -To build a Hugo site, you must have a specific directory structure, which Hugo will generate for you by entering: - -``` -$ hugo new site mysite -``` - -You now have a directory called **mysite** , and it contains the default directories you need to build a Hugo website. - -Git is your interface to get your site on the internet, so change directory to your new **mysite** folder and initialize it as a Git repository: - -``` -$ cd mysite -$ git init . -``` - -Hugo is pretty Git-friendly, so you can even use Git to install a theme for your site. Unless you plan on developing the theme you're installing, you can use the **\--depth** option to clone the latest state of the theme's source: - -``` -$ git clone --depth 1 \ - -themes/mero -``` - - -Now create some content for your site: - -``` -$ hugo new posts/hello.md -``` - -Use your favorite text editor to edit the **hello.md** file in the **content/posts** directory. Hugo accepts Markdown files and converts them to themed HTML files at publication, so your content must be in [Markdown format][11]. - -If you want to include images in your post, create a folder called **images** in the **static** directory. Place your images into this folder and reference them in your markup using the absolute path starting with **/images**. For example: - -``` -![A picture of a thing](/images/thing.jpeg) -``` - -#### Choose a theme - -You can find more themes at [themes.gohugo.io][12], but it's best to stay with a basic theme while testing. The canonical Hugo test theme is [Ananke][13]. Some themes have complex dependencies, and others don't render pages the way you might expect without complex configuration. The Mero theme used in this example comes bundled with a detailed **config.toml** configuration file, but (for the sake of simplicity) I'll provide just the basics here. Open the file called **config.toml** in a text editor and add three configuration parameters: - -``` - -languageCode = "en-us" -title = "My website on the web" -theme = "mero" - -[params] - author = "Seth Kenlon" - description = "My hugo demo" -``` - -#### Preview your site - -You don't have to put anything on the internet until you're ready to publish it. While you work, you can preview your site by launching the local-only web server that ships with Hugo. - -``` -$ hugo server --buildDrafts --disableFastRender -``` - -Open a web browser and navigate to **** to see your work in progress. - -### Publish with Git to GitLab - -To publish and host your site on GitLab, create a repository for the contents of your site. - -To create a repository in GitLab, click on the **New Project** button in your GitLab Projects page. Create an empty repository called **yourGitLabUsername.gitlab.io** , replacing **yourGitLabUsername** with your GitLab user name or group name. You must use this scheme as the name of your project. If you want to add a custom domain later, you can. - -Do not include a license or a README file (because you've started a project locally, adding these now would make pushing your data to GitLab more complex, and you can always add them later). - -Once you've created the empty repository on GitLab, add it as the remote location for the local copy of your Hugo site, which is already a Git repository: - -``` -$ git remote add origin git@gitlab.com:skenlon/mysite.git -``` - -Create a GitLab site configuration file called **.gitlab-ci.yml** and enter these options: - -``` -image: monachus/hugo - -variables: - GIT_SUBMODULE_STRATEGY: recursive - -pages: - script: - - hugo - artifacts: - paths: - - public - only: - - master -``` - -The **image** parameter defines a containerized image that will serve your site. The other parameters are instructions telling GitLab's servers what actions to execute when you push new code to your remote repository. For more information on GitLab's CI/CD (Continuous Integration and Delivery) options, see the [CI/CD section of GitLab's docs][14]. - -#### Set the excludes - -Your Git repository is configured, the commands to build your site on GitLab's servers are set, and your site ready to publish. For your first Git commit, you must take a few extra precautions so you're not version-controlling files you don't intend to version-control. - -First, add the **/public** directory that Hugo creates when building your site to your **.gitignore** file. You don't need to manage the finished site in Git; all you need to track are your source Hugo files. - -``` -$ echo "/public" >> .gitignore -``` - -You can't maintain a Git repository within a Git repository without creating a Git submodule. For the sake of keeping this simple, move the embedded **.git** directory so that the theme is just a theme. - -Note that you _must_ add your theme files to your Git repository so GitLab will have access to the theme. Without committing your theme files, your site cannot successfully build. - -``` -$ mv themes/mero/.git ~/.local/share/Trash/files/ -``` - -Alternately, use a **trash** command such as [Trashy][15]: - -``` -$ trash themes/mero/.git -``` - -Now you can add all the contents of your local project directory to Git and push it to GitLab: - -``` -$ git add . -$ git commit -m 'hugo init' -$ git push -u origin HEAD -``` - -### Go live with GitLab - -Once your code has been pushed to GitLab, take a look at your project page. An icon indicates GitLab is processing your build. It might take several minutes the first time you push your code, so be patient. However, don't be _too_ patient, because the icon doesn't always update reliably. - -![GitLab processing your build][16] - -While you're waiting for GitLab to assemble your site, go to your project settings and find the **Pages** panel. Once your site is ready, its URL will be provided for you. The URL is **yourGitLabUsername.gitlab.io/yourProjectName**. Navigate to that address to view the fruits of your labor. - -![Previewing Hugo site][17] - -If your site fails to assemble correctly, GitLab provides insight into the CI/CD pipeline logs. Review the error message for an indication of what went wrong. - -### Git and the web - -Hugo (or Jekyll or similar tools) is just one way to leverage Git as your web publishing tool. With server-side Git hooks, you can design your own Git-to-web pipeline with minimal scripting. With the community edition of GitLab, you can self-host your own GitLab instance or you can use an alternative like [Gitolite][18] or [Gitea][19] and use this article as inspiration for a custom solution. Have fun! - --------------------------------------------------------------------------------- - -via: https://opensource.com/article/19/4/building-hosting-website-git - -作者：[Seth Kenlon (Red Hat, Community Moderator)][a] -选题：[lujun9972][b] -译者：[译者ID](https://github.com/译者ID) -校对：[校对者ID](https://github.com/校对者ID) - -本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出 - -[a]: https://opensource.com/users/seth -[b]: https://github.com/lujun9972 -[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/web_browser_desktop_devlopment_design_system_computer.jpg?itok=pfqRrJgh (web development and design, desktop and browser) -[2]: https://git-scm.com/ -[3]: http://gohugo.io -[4]: http://getgrav.org -[5]: http://picocms.org/ -[6]: https://jekyllrb.com -[7]: http://slackermedia.info/podwrite/ -[8]: https://opensource.com/sites/default/files/uploads/letsencrypt-site.jpg (Let's Encrypt website) -[9]: https://gohugo.io/getting-started/installing -[10]: https://opensource.com/article/17/6/set-path-linux -[11]: https://commonmark.org/help/ -[12]: https://themes.gohugo.io/ -[13]: https://themes.gohugo.io/gohugo-theme-ananke/ -[14]: https://docs.gitlab.com/ee/ci/#overview -[15]: http://slackermedia.info/trashy -[16]: https://opensource.com/sites/default/files/uploads/hugo-gitlab-cicd.jpg (GitLab processing your build) -[17]: https://opensource.com/sites/default/files/uploads/hugo-demo-site.jpg (Previewing Hugo site) -[18]: http://gitolite.com -[19]: http://gitea.io diff --git a/translated/tech/20190401 Build and host a website with Git.md b/translated/tech/20190401 Build and host a website with Git.md new file mode 100644 index 0000000000..9827f03d99 --- /dev/null +++ b/translated/tech/20190401 Build and host a website with Git.md @@ -0,0 +1,223 @@ +[#]: collector: (lujun9972) +[#]: translator: (wxy) +[#]: reviewer: ( ) +[#]: publisher: ( ) +[#]: url: ( ) +[#]: subject: (Build and host a website with Git) +[#]: via: (https://opensource.com/article/19/4/building-hosting-website-git) +[#]: author: (Seth Kenlon https://opensource.com/users/seth) + +用 Git 建立和托管网站 +====== + +> 你可以让 Git 帮助你轻松发布你的网站。在我们鲜为人知的 Git 用法系列的第一篇文章中学习如何做到。 + +![web development and design, desktop and browser][1] + +[Git][2] 是一个罕见的应用程序，它将如此多的现代计算封装到一个程序之中，最终用作许多其他应用程序的计算引擎。虽然它以跟踪软件开发中的源代码更改而闻名，但它还有许多其他用途，可以让你的生活更轻松、更有条理。在这个 Git 系列中，我们将分享七种鲜为人知的使用 Git 的方法。 + +创建一个网站曾经是极其简单的，而同时又是一种黑魔法。回到 Web 1.0 的旧时代（不是任何人都会这样称呼它），你可以打开任何网站，查看其源代码，并对 HTML 及其内联样式和基于表格的布局进行反向工程，在这样的一两个下午之后，你就会感觉自己像一个程序员一样。不过要让你创建的页面放到互联网上，但仍然有一些问题，因为这意味着你需要处理服务器、FTP 以及 webroot 目录和文件权限。虽然从那时起，现代网站变得愈加复杂，但如果你让 Git 帮助你，自出版可以同样容易（或更容易！）。 + +### 用 Hugo 创建一个网站 + +[Hugo][3] 是一个开源的静态站点生成器。静态网站是过去的 Web 的基础（如果你回溯到很久以前，那就是 Web 的*全部*了）。静态站点有几个优点：它们相对容易编写，因为你不必编写代码；它们相对安全，因为页面上没有执行代码；并且它们可以非常快，因为除了在页面上传输的任何内容之外没有任何处理。 + +Hugo 并不是唯一一个静态站点生成器。[Grav][4]、[Pico][5]、[Jekyll][6]、[Podwrite][7] 以及许多其他的都提供了一种创建一个功能最少的、只需要很少维护的网站的简单方法。Hugo 恰好是内置集成了 GitLab 集成的一个静态站点生成器，这意味着你可以使用免费的 GitLab 帐户生成和托管你的网站。 + +Hugo 也有一些非常大的用户。例如，如果你曾经去过 [Let's Encrypt](https://letsencrypt.org/) 网站，那么你已经用过了一个用 Hugo 构建的网站。 + +![Let's Encrypt website][8] + +#### 安装 Hugo + +Hugo 是跨平台的，你可以在 [Hugo 的入门资源][9]中找到适用于 MacOS、Windows、Linux、OpenBSD 和 FreeBSD 的安装说明。 + +如果你使用的是 Linux 或 BSD，最简单的方法是从软件存储库或 ports 树安装 Hugo。确切的命令取决于你的发行版，但在 Fedora 上，你应该输入： + +``` +$ sudo dnf install hugo +``` + +通过打开终端并键入以下内容确认你已正确安装： + +``` +$ hugo help +``` + +这将打印 `hugo` 命令的所有可用选项。如果你没有看到，你可能没有正确安装 Hugo 或需要[将该命令添加到你的路径][10]。 + +#### 创建你的站点 + +要构建 Hugo 站点，你必须有个特定的目录结构，通过输入以下命令 Hugo 将为你生成它： + +``` +$ hugo new site mysite +``` + +你现在有了一个名为 `mysite` 的目录，它包含构建 Hugo 网站所需的默认目录。 + +Git 是你将网站放到互联网上的接口，因此切换到你新的 `mysite` 文件夹，并将其初始化为 Git 存储库： + +``` +$ cd mysite +$ git init . +``` + +Hugo 非常适合 Git，所以你甚至可以使用 Git 为你的网站安装主题。除非你计划开发你正在安装的主题，否则可以使用 `--depth` 选项克隆该主题的源的最新状态： + +``` +$ git clone --depth 1 https://github.com/darshanbaral/mero.git themes/mero +``` + +现在为你的网站创建一些内容： + +``` +$ hugo new posts/hello.md +``` + +使用你喜欢的文本编辑器编辑 `content/posts` 目录中的 `hello.md` 文件。Hugo 接受 Markdown 文件，并会在发布时将它们转换为主题化的 HTML 文件，因此你的内容必须采用 [Markdown 格式][11]。 + +如果要在帖子中包含图像，请在 `static` 目录中创建一个名为 `images` 的文件夹。将图像放入此文件夹，并使用以 `/images` 开头的绝对路径在标记中引用它们。例如： + +``` +![A picture of a thing](/images/thing.jpeg) +``` + +#### 选择主题 + +你可以在 [themes.gohugo.io][12] 找到更多主题，但最好在测试时保持一个基本主题。规范的 Hugo 测试主题是 [Ananke][13]。某些主题具有复杂的依赖关系，而另外一些主题没有复杂的配置的话，也许不会以你预期的方式呈现页面。本例中使用的 Mero 主题捆绑了一个详细的 `config.toml` 配置文件，但是（为了简单起见）我将在这里只提供基本的配置。在文本编辑器中打开名为 `config.toml` 的文件，并添加三个配置参数： + +``` +languageCode = "en-us" +title = "My website on the web" +theme = "mero" + +[params] + author = "Seth Kenlon" + description = "My hugo demo" +``` + +#### 预览 + +在你准备发布之前不必在互联网上放置任何内容。在你开发网站时，你可以通过启动 Hugo 附带的仅限本地的 Web 服务器来预览你的站点。 + +``` +$ hugo server --buildDrafts --disableFastRender +``` + +打开 Web 浏览器并导航到 以查看正在进行的工作。 + +### 用 Git 发布到 GitLab + +要在 GitLab 上发布和托管你的站点，请为你的站点内容创建一个存储库。 + +要在 GitLab 中创建存储库，请单击 GitLab Projects 页面中的 “New Project” 按钮。创建一个名为 `yourGitLabUsername.gitlab.io` 的空存储库，用你的 GitLab 用户名或组名替换 `yourGitLabUsername`。你必须使用此命名方式作为该项目的名称。你也可以稍后添加自定义域。 + +不要包含许可证或 README 文件（因为你已经在本地启动了一个项目，现在添加这些文件会使你的数据推向 GitLab 时更加复杂，你可以随时添加它们）。 + +在 GitLab 上创建空存储库后，将其添加为 Hugo 站点的本地副本的远程位置，该站点已经是一个 Git 存储库： + +``` +$ git remote add origin git@gitlab.com:skenlon/mysite.git +``` + +创建名为 `.gitlab-ci.yml` 的 GitLab 站点配置文件并输入以下选项： + +``` +image: monachus/hugo + +variables: + GIT_SUBMODULE_STRATEGY: recursive + +pages: + script: + - hugo + artifacts: + paths: + - public + only: + - master +``` + +`image` 参数定义了一个为你的站点提供服务的容器化图像。其他参数是告诉 GitLab 服务器在将新代码推送到远程存储库时要执行的操作的说明。有关 GitLab 的 CI/CD（持续集成和交付）选项的更多信息，请参阅 [GitLab 文档的 CI/CD 部分][14]。 + +#### 设置排除 + +你的 Git 存储库已配置好，在 GitLab 服务器上构建站点的命令也已设置，你的站点已准备好发布了。对于你的第一个 Git 提交，你必须采取一些额外的预防措施，以便你不会对你不打算进行版本控制的文件进行版本控制。 + +首先，将构建你的站点时 Hugo 创建的 `/public` 目录添加到 `.gitignore` 文件。你无需在 Git 中管理已完成的站点；你需要跟踪的是你的 Hugo 源文件。 + +``` +$ echo "/public" >> .gitignore +``` + +如果不创建 Git 子模块，则无法在 Git 存储库中维护另一个 Git 存储库。为了保持简单，移除嵌入的存储库的 `.git` 目录，以使主题（存储库）只是一个主题。 + +请注意，你**必须**将你的主题文件添加到你的 Git 存储库，以便 GitLab 可以访问该主题。如果不提交主题文件，你的网站将无法成功构建。 + +``` +$ mv themes/mero/.git ~/.local/share/Trash/files/ +``` + +你也可以像使用[回收站][15]一样使用 `trash`： + +``` +$ trash themes/mero/.git +``` + +现在，你可以将本地项目目录的所有内容添加到 Git 并将其推送到 GitLab： + +``` +$ git add . +$ git commit -m 'hugo init' +$ git push -u origin HEAD +``` + +### 上线 GitLab + +将代码推送到 GitLab 后，请查看你的项目页面。有个图标表示 GitLab 正在处理你的构建。第一次推送代码可能需要几分钟，所以请耐心等待。但是，请不要**一直**等待，因为该图标并不总是可靠地更新。 + +![GitLab processing your build][16] + +当你在等待 GitLab 组装你的站点时，请转到你的项目设置并找到 “Pages” 面板。你的网站准备就绪后，它的 URL 就可以用了。该 URL 是 `yourGitLabUsername.gitlab.io/yourProjectName`。导航到该地址以查看你的劳动成果。 + +![Previewing Hugo site][17] + +如果你的站点无法正确组装，GitLab 提供了可以深入了解 CI/CD 管道的日志。查看错误消息以找出发生了什么问题。 + +### Git 和 Web + +Hugo（或 Jekyll 或类似工具）只是利用 Git 作为 Web 发布工具的一种方式。使用服务器端 Git 挂钩，你可以使用最少的脚本设计你自己的 Git-to-web 工作流。使用 GitLab 的社区版，你可以自行托管你自己的 GitLab 实例，或者你可以使用 [Gitolite][18] 或 [Gitea][19] 等替代方案，并使用本文作为自定义解决方案的灵感来源。祝你玩得开心！ + +-------------------------------------------------------------------------------- + +via: https://opensource.com/article/19/4/building-hosting-website-git + +作者：[Seth Kenlon][a] +选题：[lujun9972][b] +译者：[wxy](https://github.com/wxy) +校对：[校对者ID](https://github.com/校对者ID) + +本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出 + +[a]: https://opensource.com/users/seth +[b]: https://github.com/lujun9972 +[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/web_browser_desktop_devlopment_design_system_computer.jpg?itok=pfqRrJgh (web development and design, desktop and browser) +[2]: https://git-scm.com/ +[3]: http://gohugo.io +[4]: http://getgrav.org +[5]: http://picocms.org/ +[6]: https://jekyllrb.com +[7]: http://slackermedia.info/podwrite/ +[8]: https://opensource.com/sites/default/files/uploads/letsencrypt-site.jpg (Let's Encrypt website) +[9]: https://gohugo.io/getting-started/installing +[10]: https://opensource.com/article/17/6/set-path-linux +[11]: https://commonmark.org/help/ +[12]: https://themes.gohugo.io/ +[13]: https://themes.gohugo.io/gohugo-theme-ananke/ +[14]: https://docs.gitlab.com/ee/ci/#overview +[15]: http://slackermedia.info/trashy +[16]: https://opensource.com/sites/default/files/uploads/hugo-gitlab-cicd.jpg (GitLab processing your build) +[17]: https://opensource.com/sites/default/files/uploads/hugo-demo-site.jpg (Previewing Hugo site) +[18]: http://gitolite.com +[19]: http://gitea.io