Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Comparison: Cloudflare Pages #229

Merged
merged 4 commits into from
Sep 12, 2023
Merged

Comparison: Cloudflare Pages #229

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc35f50
Comparison: Cloudflare Pages
humitos Sep 8, 2023
7221630
Probably better to use MkDocs in this page
humitos Sep 8, 2023
fb69e95
Feeback from review
humitos Sep 12, 2023
6bf858e
Typo
humitos Sep 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 78 additions & 0 deletions content/images/cloudflare-pages-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
88 changes: 88 additions & 0 deletions content/includes/try-it-out-pelican.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<div class="ui container">
<div class="ui horizontal divider">Try it out</div>
</div>

<section id="try-it-out">
<div class="ui padded container">
<h2 class="ui huge center aligned header">
Deploy in 5 minutes and see for yourself
</h2>

<div class="ui very padded centered grid">

<div class="ten wide computer sixteen wide tablet sixteen wide mobile column">
<div class="ui large left aligned basic vertical segment">

{# Stylized code blocks #}
{% call technical.code_block(title="<code>.readthedocs.yaml</code>", icon="fa-file") %}
{% markdown %}

```yaml
version: 2
build:
os: "ubuntu-22.04"
tools:
python: "3"
commands:
# Install Pelican and its dependencies
humitos marked this conversation as resolved.
Show resolved Hide resolved
- pip install "pelican[markdown]"
# Build the site
- pelican \
--settings docs/pelicanconf.py \
--output $READTHEDOCS_OUTPUT/html
```

{% endmarkdown %}
{% endcall %}
</div>
</div>

<div class="middle aligned left aligned six wide computer twelve wide tablet sixteen wide mobile column">
<div class="ui padded basic segment">
<div class="ui relaxed list">

{%- set header_1 = "Create an account" %}
{%- set icon_1 = "fa-square-1" -%}
<span class="ui small teal header item">
<i class="fad {{ icon_1 }} secondary big icon"></i>
<span class="content">
{{ header_1 }}
<span class="sub header">Sign up with GitHub or your email.</span>
</span>
</span>

{%- set header_2 = "Import your project" %}
{%- set icon_2 = "fa-square-2" -%}
<span class="ui small header item">
<i class="fad {{ icon_2 }} secondary big icon"></i>
<span class="content">
{{ header_2 }}
<span class="sub header">Select a project from your existing Git repositories.</span>
</span>
</span>

{%- set header_3 = "Add YAML config" %}
{%- set icon_3 = "fa-square-3" -%}
<span class="ui small header item">
<i class="fad {{ icon_3 }} secondary big icon"></i>
<span class="content">
{{ header_3 }}
<span class="sub header">Save this file as <code>.readthedocs.yaml</code>, and update the commands as necessary</span>
</span>
</span>

{%- set header_4 = "Your docs build on every commit" %}
{%- set icon_4 = "fa-square-4" -%}
<span class="ui small header item">
<i class="fad {{ icon_4 }} secondary big icon"></i>
<span class="content">
{{ header_4 }}
<span class="sub header">Like magic.</span>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
96 changes: 96 additions & 0 deletions content/pages/comparisons/cloudflare-pages.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
{# View this page at http://localhost:8080/comparisons/cloudflare-pages/ #}

<html>
<head>
<title>Read the Docs vs. Cloudflare Pages comparison</title>
<meta name="template" content="page" />
<meta name="slug" content="comparisons/cloudflare-pages" />
<meta name="status" content="hidden" />
<meta name="description" content="" />
</head>
<body>

{% import "partials/basic.html" as basic %}
{% import "partials/technical.html" as technical %}
{% import "partials/homepage.html" as homepage %}
{% import "partials/comparisons.html" as comparison %}

<section>
{% call basic.header_lead(
header="Read the Docs is the <em><strong>all-in-one</strong></em> solution you're looking for your documentation")
%}
<p>
Cloudflare Pages is great for hosting SPA (<em>Single Page Application</em>) for frontend developers.
However, when talking about <strong>technical writers</strong> and <strong>documentation projects</strong>,
Read the Docs is <em>the</em> perfect solution.
</p>
<p>
Let's compare it to know what you can expect when deploying your project's documentation to Read the Docs.
</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Cloudflare Pages is great for hosting SPA (<em>Single Page Application</em>) for frontend developers.
However, when talking about <strong>technical writers</strong> and <strong>documentation projects</strong>,
Read the Docs is <em>the</em> perfect solution.
</p>
<p>
Let's compare it to know what you can expect when deploying your project's documentation to Read the Docs.
</p>
Cloudflare Pages is great for hosting a SPA (<em>Single Page Application</em>).
However, when talking about <strong>software documentation projects</strong>,
Read the Docs is <em>the</em> perfect solution.
</p>
<p>
Understand the benefits of deploying your project's documentation to Read the Docs.
</p>

Copy link
Member Author

@humitos humitos Sep 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hrm, your suggestion is good. However, I'd like to keep "technical writers" somehow in the sentence because I want to rank on it --I put it there on purpose. We are not mentioning that role enough and we have been focusing us more in "developers" without reaching many technical writers.

Also, "Cloudflare pages is for frontend developers" is a concept that works great to me because the reader will immediately realize that Cloudflare is not for them. It's the way they sell themselves:

Screenshot_2023-09-12_11-02-38

which makes sense since they allow creating some kind of APIs.

Also also, I'd like to leave the "documentation projects" as-is, since we already have customers documenting other type of projects that are not software. Like hardware, for example.

I'll take some parts of this suggestion. However, I'd really appreciate your thoughts here about my points to continue the conversation. After that, we can change this paragraph in a following PR 👍🏼

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense. I was mostly just trying to cleanup the language and couldn't find a good way to keep it in there, but fine with keeping it 👍

{% endcall %}
</section>

<section id="compare">
<div class="ui padded container">

{% call comparison.feature_table(other_img="/images/cloudflare-pages-logo.svg", other_img_alt="Cloudflare Pages logo") %}
{{ comparison.feature_row("Build your site on the cloud", "Generate your site's content on the cloud", "fa-gears", on_other=True) }}
{{ comparison.feature_row("Deploy previews", "Solve style issues before deploying", "fa-rocket-launch", on_other=True) }}
{{ comparison.feature_row("Page analytics", "Understand how people browse your documentation", "fa-chart-mixed", on_other=True) }}
{{ comparison.feature_row("Redirects", "Redirect users to the right page", "fa-arrows-turn-right", on_other=True) }}
{{ comparison.feature_row("Static hosting", "Publish any static content", "fa-page", on_other=True) }}
{{ comparison.feature_row("Custom 404 pages", "Style 404 pages with context-related information", "fa-xmark", on_other=True) }}
{{ comparison.feature_row("Documentation tool agnostic", "Use the documentation tool your team prefers (Sphinx, MkDocs, Docusaurus, etc)", "fa-book", on_other=True) }}
{{ comparison.feature_row("Custom theme", "Style the documentation as you like", "fa-pen-swirl", on_other=True) }}
{{ comparison.feature_row("Private documention", "Give access only to trusted people", "fa-lock", on_other=True) }}
{{ comparison.feature_row("Advanced collaboration", "Unlimited users", "fa-people-group", on_other=True) }}
{{ comparison.feature_row("Unlimited builds per month", "Trigger as many builds as you need", "fa-infinity") }}
{{ comparison.feature_row("Multiple versions", "Publish multiple versions of your documentation", "fa-books") }}
{{ comparison.feature_row("Translations", "Serve translated versions of your docs", "fa-language") }}
{{ comparison.feature_row("Search", "Always find what you are looking for", "fa-magnifying-glass") }}
{{ comparison.feature_row("Visual diff on deploy previews", "Visualize differences directly on the rendered version", "fa-face-monocle") }}
{{ comparison.feature_row("Custom \"robots.txt\"", "Improve your SEO by telling bots how to explore your site", "fa-robot") }}
{{ comparison.feature_row("Search analytics", "Explore what people search for in your docs", "fa-chart-simple") }}
{{ comparison.feature_row("Open Source", "No lock in and contribute back", "fa-brands fa-osi") }}
{% endcall %}

</div>
</section>

{# Try it out code block #}
{% include "includes/try-it-out-mkdocs.html" %}
humitos marked this conversation as resolved.
Show resolved Hide resolved

{% block homepage_bottom_callout %}
<section>
<div class="ui very padded container">
<div class="ui grid center aligned">
<div class="row">
<div class="column twelve wide computer sixteen wide tablet">
<div class="ui basic vertical huge segment">
<h2 class="ui center aligned header">
Still not convinced? Try it yourself <i class="fad fa-rocket icon"></i>
</h2>

<p>
Cloudflare Pages is a great product, but it's more thought for deploying SPA (Single Page Applications) with fewer options for documentation sites.
For publishing great documentation <strong>without having to build the features yourself</strong>,
Read the Docs is the <em>all-in-one solution</em> that provides everything you need out of the box!
</p>

<p>
<a class="ui large teal stackable button"
data-analytics="signup-modal"
onclick="jQuery('#signup-modal').modal('show');">
<i class="fad fa-rocket icon"></i>
Get started for free
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock homepage_bottom_callout %}
</body>
</html>
1 change: 1 addition & 0 deletions readthedocs_theme/templates/includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ <h4 class="ui sub header">Learn more</h4>
<a class="item" href="https://docs.readthedocs.io/page/config-file/index.html">Configure your project</a>
<a class="item" href="/comparisons/github-pages/">Comparison to GitHub Pages</a>
<a class="item" href="/comparisons/gitbook/">Comparison to GitBook</a>
<a class="item" href="/comparisons/cloudflare-pages/">Comparison to Cloudflare Pages</a>
{% endblock menu_learn %}
</div>
</div>
Expand Down