blob: 81fdee374d4c6d1d542ec2386aff4b86df25473d [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Apache Flink: Improving the Website</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/flink.css">
<link rel="stylesheet" href="/css/syntax.css">
<!-- Blog RSS feed -->
<link href="/blog/feed.xml" rel="alternate" type="application/rss+xml" title="Apache Flink Blog: RSS feed" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- We need to load Jquery in the header for custom google analytics event tracking-->
<script src="/js/jquery.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Main content. -->
<div class="container">
<div class="row">
<div id="sidebar" class="col-sm-3">
<!-- Top navbar. -->
<nav class="navbar navbar-default">
<!-- The logo. -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-logo">
<a href="/">
<img alt="Apache Flink" src="/img/flink-header-logo.svg" width="147px" height="73px">
</a>
</div>
</div><!-- /.navbar-header -->
<!-- The navigation links. -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-main">
<!-- First menu section explains visitors what Flink is -->
<!-- What is Stream Processing? -->
<!--
<li><a href="/streamprocessing1.html">What is Stream Processing?</a></li>
-->
<!-- What is Flink? -->
<li><a href="/flink-architecture.html">What is Apache Flink?</a></li>
<!-- What is Stateful Functions? -->
<li><a href="/stateful-functions.html">What is Stateful Functions?</a></li>
<!-- Use cases -->
<li><a href="/usecases.html">Use Cases</a></li>
<!-- Powered by -->
<li><a href="/poweredby.html">Powered By</a></li>
&nbsp;
<!-- Second menu section aims to support Flink users -->
<!-- Downloads -->
<li><a href="/downloads.html">Downloads</a></li>
<!-- Getting Started -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Getting Started<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://ci.apache.org/projects/flink/flink-docs-release-1.11/getting-started/index.html" target="_blank">With Flink <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
<li><a href="https://ci.apache.org/projects/flink/flink-statefun-docs-release-2.1/getting-started/project-setup.html" target="_blank">With Flink Stateful Functions <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
<li><a href="/training.html">Training Course</a></li>
</ul>
</li>
<!-- Documentation -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Documentation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://ci.apache.org/projects/flink/flink-docs-release-1.11" target="_blank">Flink 1.11 (Latest stable release) <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
<li><a href="https://ci.apache.org/projects/flink/flink-docs-master" target="_blank">Flink Master (Latest Snapshot) <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
<li><a href="https://ci.apache.org/projects/flink/flink-statefun-docs-release-2.1" target="_blank">Flink Stateful Functions 2.1 (Latest stable release) <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
<li><a href="https://ci.apache.org/projects/flink/flink-statefun-docs-master" target="_blank">Flink Stateful Functions Master (Latest Snapshot) <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
</ul>
</li>
<!-- getting help -->
<li><a href="/gettinghelp.html">Getting Help</a></li>
<!-- Blog -->
<li><a href="/blog/"><b>Flink Blog</b></a></li>
<!-- Flink-packages -->
<li>
<a href="https://flink-packages.org" target="_blank">flink-packages.org <small><span class="glyphicon glyphicon-new-window"></span></small></a>
</li>
&nbsp;
<!-- Third menu section aim to support community and contributors -->
<!-- Community -->
<li><a href="/community.html">Community &amp; Project Info</a></li>
<!-- Roadmap -->
<li><a href="/roadmap.html">Roadmap</a></li>
<!-- Contribute -->
<li><a href="/contributing/how-to-contribute.html">How to Contribute</a></li>
<ul class="nav navbar-nav navbar-subnav">
<li >
<a href="/contributing/contribute-code.html">Contribute Code</a>
</li>
<li >
<a href="/contributing/reviewing-prs.html">Review Pull Requests</a>
</li>
<li >
<a href="/contributing/code-style-and-quality-preamble.html">Code Style and Quality Guide</a>
</li>
<li >
<a href="/contributing/contribute-documentation.html">Contribute Documentation</a>
</li>
<li >
<a href="/contributing/docs-style.html">Documentation Style Guide</a>
</li>
<li class="active">
<a href="/contributing/improve-website.html">Contribute to the Website</a>
</li>
</ul>
<!-- GitHub -->
<li>
<a href="https://github.com/apache/flink" target="_blank">Flink on GitHub <small><span class="glyphicon glyphicon-new-window"></span></small></a>
</li>
&nbsp;
<!-- Language Switcher -->
<li>
<a href="/zh/contributing/improve-website.html">中文版</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-bottom">
<hr />
<!-- Twitter -->
<li><a href="https://twitter.com/apacheflink" target="_blank">@ApacheFlink <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
<!-- Visualizer -->
<li class=" hidden-md hidden-sm"><a href="/visualizer/" target="_blank">Plan Visualizer <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
<hr />
<li><a href="https://apache.org" target="_blank">Apache Software Foundation <small><span class="glyphicon glyphicon-new-window"></span></small></a></li>
<li>
<style>
.smalllinks:link {
display: inline-block !important; background: none; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; min-width: 75px;
}
</style>
<a class="smalllinks" href="https://www.apache.org/licenses/" target="_blank">License</a> <small><span class="glyphicon glyphicon-new-window"></span></small>
<a class="smalllinks" href="https://www.apache.org/security/" target="_blank">Security</a> <small><span class="glyphicon glyphicon-new-window"></span></small>
<a class="smalllinks" href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Donate</a> <small><span class="glyphicon glyphicon-new-window"></span></small>
<a class="smalllinks" href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks</a> <small><span class="glyphicon glyphicon-new-window"></span></small>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<div class="col-sm-9">
<div class="row-fluid">
<div class="col-sm-12">
<h1>Improving the Website</h1>
<p>The <a href="http://flink.apache.org">Apache Flink website</a> presents Apache Flink and its community. It serves several purposes including:</p>
<ul>
<li>Informing visitors about Apache Flink and its features.</li>
<li>Encouraging visitors to download and use Flink.</li>
<li>Encouraging visitors to engage with the community.</li>
</ul>
<p>We welcome any contribution to improve our website. This document contains all information that is necessary to improve Flink’s website.</p>
<div class="page-toc">
<ul id="markdown-toc">
<li><a href="#obtain-the-website-sources" id="markdown-toc-obtain-the-website-sources">Obtain the website sources</a></li>
<li><a href="#directory-structure-and-files" id="markdown-toc-directory-structure-and-files">Directory structure and files</a></li>
<li><a href="#update-or-extend-the-documentation" id="markdown-toc-update-or-extend-the-documentation">Update or extend the documentation</a></li>
<li><a href="#submit-your-contribution" id="markdown-toc-submit-your-contribution">Submit your contribution</a></li>
<li><a href="#committer-section" id="markdown-toc-committer-section">Committer section</a></li>
</ul>
</div>
<h2 id="obtain-the-website-sources">Obtain the website sources</h2>
<p>The website of Apache Flink is hosted in a dedicated <a href="http://git-scm.com/">git</a> repository which is mirrored to GitHub at <a href="https://github.com/apache/flink-web">https://github.com/apache/flink-web</a>.</p>
<p>The easiest way to contribute website updates is to fork <a href="https://github.com/apache/flink-web">the mirrored website repository on GitHub</a> into your own GitHub account by clicking on the fork button at the top right. If you have no GitHub account, you can create one for free.</p>
<p>Next, clone your fork to your local machine.</p>
<div class="highlight"><pre><code>git clone https://github.com/&lt;your-user-name&gt;/flink-web.git
</code></pre></div>
<p>The <code>flink-web</code> directory contains the cloned repository. The website resides in the <code>asf-site</code> branch of the repository. Run the following commands to enter the directory and switch to the <code>asf-site</code> branch.</p>
<div class="highlight"><pre><code>cd flink-web
git checkout asf-site
</code></pre></div>
<h2 id="directory-structure-and-files">Directory structure and files</h2>
<p>Flink’s website is written in <a href="http://daringfireball.net/projects/markdown/">Markdown</a>. Markdown is a lightweight markup language which can be translated to HTML. We use <a href="http://jekyllrb.com/">Jekyll</a> to generate static HTML files from Markdown.</p>
<p>The files and directories in the website git repository have the following roles:</p>
<ul>
<li>All files ending with <code>.md</code> are Markdown files. These files are translated into static HTML files.</li>
<li>Regular directories (not starting with an underscore (<code>_</code>)) contain also <code>.md</code> files. The directory structure is reflected in the generated HTML files and the published website.</li>
<li>The <code>_posts</code> directory contains blog posts. Each blog post is written as one Markdown file. To contribute a post, add a new file there.</li>
<li>The <code>_includes/</code> directory contains includeable files such as the navigation bar or the footer.</li>
<li>The <code>docs/</code> directory contains copies of the documentation of Flink for different releases. There is a directory inside <code>docs/</code> for each stable release and the latest SNAPSHOT version. The build script is taking care of the maintenance of this directory.</li>
<li>The <code>content/</code> directory contains the generated HTML files from Jekyll. It is important to place the files in this directory since the Apache Infrastructure to host the Flink website is pulling the HTML content from his directory. (For committers: When pushing changes to the website git, push also the updates in the <code>content/</code> directory!)</li>
</ul>
<h2 id="update-or-extend-the-documentation">Update or extend the documentation</h2>
<p>You can update and extend the website by modifying or adding Markdown files or any other resources such as CSS files. To verify your changes start the build script in preview mode.</p>
<div class="highlight"><pre><code>./build.sh -p
</code></pre></div>
<p>The script compiles the Markdown files into HTML and starts a local webserver. Open your browser at <code>http://localhost:4000</code> to view the website including your changes. The Chinese translation is located at <code>http://localhost:4000/zh</code>. The served website is automatically re-compiled and updated when you modify and save any file and refresh your browser.</p>
<p>Alternatively you can build the web site using Docker (without augmenting your host environment):</p>
<div class="highlight"><pre><code>docker run --rm --volume="$PWD:/srv/flink-web" --expose=4000 -p 4000:4000 -it ruby:2.5 bash -c 'cd /srv/flink-web &amp;&amp; ./build.sh -p'
</code></pre></div>
<p>Please feel free to ask any questions you have on the developer mailing list.</p>
<h2 id="submit-your-contribution">Submit your contribution</h2>
<p>The Flink project accepts website contributions through the <a href="https://github.com/apache/flink-web">GitHub Mirror</a> as <a href="https://help.github.com/articles/using-pull-requests">Pull Requests</a>. Pull requests are a simple way of offering a patch by providing a pointer to a code branch that contains the changes.</p>
<p>To prepare and submit a pull request follow these steps.</p>
<ol>
<li>
<p>Commit your changes to your local git repository. <strong>Please Make sure that your commit does not include translated files (any files in the <code>content/</code> directory).</strong> Unless your contribution is a major rework of the website, please squash it into a single commit.</p>
</li>
<li>
<p>Push the commit to a dedicated branch of your fork of the Flink repository at GitHub.</p>
<p><code>
git push origin myBranch
</code></p>
</li>
<li>
<p>Go the website of your repository fork (<code>https://github.com/&lt;your-user-name&gt;/flink-web</code>) and use the “Create Pull Request” button to start creating a pull request. Make sure that the base fork is <code>apache/flink-web asf-site</code> and the head fork selects the branch with your changes. Give the pull request a meaningful description and submit it.</p>
</li>
</ol>
<h2 id="committer-section">Committer section</h2>
<p><strong>This section is only relevant for committers.</strong></p>
<h3 class="no_toc" id="asf-website-git-repositories">ASF website git repositories</h3>
<p><strong>ASF writable</strong>: https://gitbox.apache.org/repos/asf/flink-web.git</p>
<p>Details on how to set the credentials for the ASF git repository are <a href="https://gitbox.apache.org/">linked here</a>.</p>
<h3 class="no_toc" id="merging-a-pull-request">Merging a pull request</h3>
<p>Contributions are expected to be done on the source files only (no modifications on the compiled files in the <code>content/</code> directory.). Before pushing a website change, please run the build script</p>
<div class="highlight"><pre><code>./build.sh
</code></pre></div>
<p>add the changes to the <code>content/</code> directory as an additional commit and push the changes to the ASF base repository.</p>
<h3 class="no_toc" id="updating-the-documentation-directory">Updating the documentation directory</h3>
<p>The build script does also take care of maintaining the <code>docs/</code> directory. Set the <code>-u</code> flag to update documentation. This includes fetching the Flink git repository and copying different versions of the documentation.</p>
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="footer text-center col-sm-12">
<p>Copyright © 2014-2019 <a href="http://apache.org">The Apache Software Foundation</a>. All Rights Reserved.</p>
<p>Apache Flink, Flink®, Apache®, the squirrel logo, and the Apache feather logo are either registered trademarks or trademarks of The Apache Software Foundation.</p>
<p><a href="/privacy-policy.html">Privacy Policy</a> &middot; <a href="/blog/feed.xml">RSS feed</a></p>
</div>
</div>
</div><!-- /.container -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<script src="/js/codetabs.js"></script>
<script src="/js/stickysidebar.js"></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-52545728-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>